VSCode 配置Chrome 浏览器 Debug 调试Vue 代码

在VS Code 调试你的 Vue 组件之前，需要更新 webpack 配置以构建 source map。配置完成之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。

第一步: 配置 devtool 属性值为source-map, 其中Vue CLI 2与Vue CLI 3 有区别:

Vue CLI 2: 在 config/index.js 文件内配置: devtool: 'source-map',

Vue CLI 3: 在 vue.config.js 文件内配置: devtool: 'source-map'

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
或
module.exports = {
  configureWebpack: (config) =>{
    config.devtool = 'source-map'
  }
}

第二步: 配置launch.json

VS Code 界面左侧Debugger 图标打开 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome/Firefox：Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置：

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
     {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
  ]
}

第三步: 通过 npm run dev 启动前端工程

必须先启动通过 vscode 的terminal 启动前端工程,才可以进行 debug 调试

第四步: Debug 视图，点击运行和调试按钮,启动 debug 调测

第五步: 打断点调测