11×4 精读Vue官方文档 – CookBook – 在 VS Code 中调试

精读 Vue 官方文档系列 ?

先决条件

在 VScode 中调试由 Vue CLI 生成的 Vue.js 应用。

1. 安装 Chrome
2. 安装 Vscode
   1. 安装基于 Chrome 的 Debugger 扩展：Debugger for Chrome
   2. 在 Activity Bar 中，点击 Debugger 生成基于 Chrome 的 launch.json 配置文件。

请基于自己的具体环境，修改下面的：launch.json 文件，注意 url 中的端口号要与你应用的端口号一致。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8082/",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
              }
        }
    ]
}
复制代码

3. 配置 Vue 项目的 vue.config.js。

module.exports = {
    devServer: {
      port: 8082,
    },
    configureWebpack: {
      devtool: 'source-map'
    },
  }
复制代码

这里的重点就是 source-map，它用于映射你的项目源码与被构建工具处理过的代码，这样它就可以记录浏览器中的调试步骤然后投射到 Vscdoe 中。

注意：如果源码与被处理后的代码没有正确映射，就可能导致断点的位置漂移、或者红色的断点变成一个透明无效的断点。

4. 最后，你需要在 Vscode 的 Activity Bar 中找到的你的配置项：vuejs: chrome，最后点击绿色的启动按钮。

调试 Typescript 项目

如果你的 Vue 项目中使用到 TypeScript，那么 webpack:// 协议下的目录结构可能就会发生改变，从而导致断点不能被命中、发生漂移等现象。

其中之一的解决办法就是修改：sourceMapPathOverrides 的配置：

"sourceMapPathOverrides": {
    "webpack:///./src/*":"${webRoot}/*",
}
复制代码

强行修复断点漂移

很简单，很粗暴，如果真的一时无法很好的解决断点漂移，那么就直接在源代码中加入 debugger 吧。

替代方案

1. 使用 Vue 配套的 Vue-devtools 工具进行调试。
2. 手动 debugger。

扩展 – 在 WebStorm 中调试 Vue

1. 首先确保自己项目的配置 devtool:"source-map"。
2. 执行 npm 脚本，启动项目即可。
3. 点击“edit configurations”，打开下面的弹窗，进行新增。

注意，第 4 步，要输入你项目启动的 url。

4. 点击确定，保存配置。
5. 最后回到第一步的位置，选择调试配置，点击右边的 “debug” 按钮。