如何使用 Chrome DevTools(及 Vue Devtools)调试 Vue.js 应用

调试 Vue 应用时，除了熟悉 Chrome 内置的 DevTools，还应同时使用官方的 **Vue.js Devtools** 扩展。下面分步骤详述从环境准备到进阶技巧。

---

## 一、环境准备

1. 开发构建（启用 Source Map）

- Vue CLI 项目默认在 `npm run serve` 下启用 source-map。

- 确保 `vue.config.js` 中未禁用：

```js

module.exports = {

productionSourceMap: false, // 仅生产环境禁用

configureWebpack: {

devtool: 'cheap-module-eval-source-map'

}

}

```

2. 安装并启用 Vue.js Devtools

- Chrome Web Store 安装 “Vue.js devtools” 扩展；或自行编译：

https://github.com/vuejs/vue-devtools

- 启动时打开 DevTools，会多出一个 **“Vue”** 面板。

3. 打开 DevTools

- Windows/Linux：`Ctrl+Shift+I`

- macOS：`+Option+I`

---

## 二、使用 Vue Devtools 面板

### 1. Components（组件树）

- **查看组件树**：左侧列出当前页面所有 Vue 根实例及子组件。

- **选中组件**：点击某组件，右侧显示它的：

- `props`、`data`、`computed`、`watch`、`$attrs`、`$listeners`…

- **修改实时生效**：双击任意字段修改，查看界面变更。

### 2. Vuex（状态管理）

（若项目使用 Vuex）

- **State**：实时查看 store.state

- **Getters**：查看并调用 getters

- **Mutations / Actions**：

- 点击 “Time Travel” 回放状态变更

- 生成时间轴，支持回滚到某一时刻

### 3. Events（事件跟踪）

- **Emitted Events**：列出当前组件发出的 `$emit` 事件及载荷

- **监听**：点击可跳转到触发处

### 4. Performance（性能分析）

- **Record**：录制组件渲染／更新过程

- 点击 **Record**, 在页面做一次交互，Stop 后可分析各组件的 mount/update 开销

---

## 三、结合 Chrome DevTools 调试

### 1. DOM 与组件实例联动

1. Elements 面板中选中 DOM 节点

2. 在 Console 中输入：

```js

// 拿到该节点对应的 Vue 实例

const vm = $0.__vue__;

console.log(vm.$data, vm.$props, vm.$el);

```

3. 或直接在 Console 使用 `$vm0`（等同于最上次在 Components 面板中选中的那个组件实例）。

### 2. 在源代码中设置断点

1. 切换到 **Sources** 面板

2. 左侧 `webpack://` → 找到 `.vue` 文件（或 `.js`）

3. 点开后可看到 `<script>` 里的源码，点击行号设置**行断点**

4. **条件断点**：右击行号 → `Add conditional breakpoint`

```js

// 例如只在 this.count > 5 时中断

this.count > 5

```

5. 程序运行到断点处，DevTools 自动停住，可在右侧 Scope/Watch 查看变量状态，单步调试（F10/F11）。

### 3. Logpoints（日志断点）

无需修改代码，即可在不暂停的情况下打印变量：

```text

右键行号 → Add logpoint

Message: Count now = {this.count}

```

### 4. 监控事件与属性变化

- **DOM 断点**（在 Elements 面板）

- 右键某节点 → Break on → subtree modifications／attribute changes

- **XHR/fetch 断点**

- Sources →右侧 “XHR/fetch Breakpoints” → 勾选，拦截 AJAX 请求

- **监控 DOM 事件**（Console）

```js

monitorEvents($0, 'click') // 监控选中元素的 click 事件

unmonitorEvents($0, 'click')

```

### 5. Network & Async 调试

- **Network 面板**

- 查看各接口请求、响应时间、请求参数、Response

- 右键 → Copy as cURL，可在终端重放请求

- **Async Call Stack**

- 在 Sources → Settings () → 勾选 “Enable async stack traces”，断点时可看到异步调用链

### 6. 性能剖析

- **Performance 面板**

1. 点击 Record，执行交互，然后 Stop

2. 在 Flame Chart 中：

- 找到 Vue 包裹的 `__vue_bracket__` 调用

- 标识出哪些生命周期（`beforeUpdate`、`updated`）或渲染函数耗时最多

- **Coverage 面板**（Ctrl+Shift+P → “Show Coverage”）

- 分析未被执行的 CSS/JS，辅助剔除死代码

---

## 四、进阶技巧

1. **Workspaces**

- 将本地项目目录映射到 DevTools，直接在 Sources 编辑保存到磁盘

2. **Custom Formatter**

- 在 Console → Settings → Enable custom formatters，安装 vue-devtools-formatters，使组件在 Console 中更易阅读

3. **断点自动跳转到 Vue Devtools**

- 在 Vue Devtools 右上齿轮 → “Enable Vue Devtools for Production build”

4. **代理跨域调试**

- 在 Network → Disable Cache（DevTools 打开时禁用缓存）

- 在 Chrome 启动参数中加 `--disable-web-security --user-data-dir=…`（仅用于本地调试）

---

> **总结**

> - **Vue Devtools**：组件/状态/性能的高层可视化

> - **Chrome DevTools**：底层断点、网络、性能剖析、源码编辑

>

> 二者结合，能让你快速定位组件逻辑、数据流与性能瓶颈，并在真实源码上做精细调试。