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