先決條件

你必須安裝好 Chrome 和 VS Code。同時請確保自己在 VS Code 中安裝了 Debugger for Chrome 擴展的最新版本。

在可以從 VS Code 調試你的 Vue 組件之前，你需要更新 webpack 配置以構建 source map。做了這件事之後，我們的調試器就有機會將一個被壓縮的文件中的代碼對應回其源文件相應的位置。這會確保你可以在一個應用中調試，即便你的資源已經被 webpack 優化過了也沒關系。

打開 config/index.js 並找到 devtool 屬性。將其更新為：

devtool: ‘source-map‘,

如果使用 vue-cli3 你需要設置 vue.config.js 內的 devtool 屬性：

module.exports = {
  configureWebpack: {
    devtool: ‘source-map‘
  }
}

進入Debugger視圖，添加Chrome配置，將內容替換成以下內容

{
  "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}/*"
      }
    }
  ]
}

設置斷點

此處response返回數據

啟動調試

在終端使用如下命令開啟這個應用

npm start

進入Debug視圖，選擇‘vuejs:chrome’配置，然後按F5或點擊綠色的play按鈕

隨著一個新的 Chrome 實例打開 http://localhost:8080，你的斷點現在應該被命中了。

更多內容請參考官方文檔:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

VSCode調試vue項目