vscode中调试vue工程

在 debug 时，通常的方式如下几种：

• 源代码中增加 debugger 或者 console.log
• 在 Chrome 浏览器 Sources 中加断点
• vscode 中直接调试，对源码定位准确直观（下面阐述该种方式）

以 Chrome 浏览器为例，其他浏览器类似。

第一步： 首先确保 Chrome浏览器已正确安装，并在 vscode 中添加 vscode-chrome-debug 插件；

在这里插入图片描述

第二步： 修改 webpack 相关配置，输出 source-map。 以 Vue CLI 3.X 为例，vue.config.js 中增加如下配置：

module.exports = {
  chainWebpack: (config) => {
    if (isDev) {
      config.devtool('source-map')
    }
  }
}

注意，也可以通过 configureWebpack: { devtool: 'source-map' }进行配置，方式多种，不赘述。

第三步： 配置 launch.json 文件，具体配置 vscode-chrome-debug 插件有详细描述。

在这里插入图片描述

第四步： 增加断点，启动即可，会开启一个新的浏览器窗口。 其他： 如果 vue 文件中不能加断点，是由于 vscode 配置问题导致，如下修改：首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug：Allow Breakpoints Everywhere

在这里插入图片描述

其他参考地址：

• https://github.com/Microsoft/vscode-chrome-debug
• https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md