如何使用 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**：底层断点、网络、性能剖析、源码编辑
>
> 二者结合，能让你快速定位组件逻辑、数据流与性能瓶颈，并在真实源码上做精细调试。