每個應用，不論大小，都需要理解程式是如何執行失敗的。在本案例中，我們會探索一些使用 Chrome 來進行測試的 VS Code 使用者的工作流程。

這個案例展示了在通過 Vue CLI 生成的 Vue.js 應用程式中，如何使用 VS Code 的 Debugger for Chrome 擴充套件進行除錯。

先決條件

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

請通過 Vue CLI，遵循它的 README 中的安裝文件安裝並建立一個專案。然後進入這個新建立的應用的目錄，開啟 VS Code。

在 Chrome Devtools 中展示原始碼

在可以從 VS Code 除錯你的 Vue 元件之前，你需要更新 webpack 配置以構建 source map。做了這件事之後，我們的偵錯程式就有機會將一個被壓縮的檔案中的程式碼對應回其原始檔相應的位置。這會確保你可以在一個應用中除錯，即便你的資源已經被 webpack 優化過了也沒關係。

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

devtool: 'source-map',

如果使用 Vue CLI 3 你需要設定 vue.config.js 內的 devtool 屬性：

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

從vs code 啟動應用

點選在 Activity Bar 裡的 Debugger 圖示來到 Debug 檢視，然後點選那個齒輪圖示來配置一個 launch.json的檔案，選擇 Chrome 環境。然後將生成的launch.json的內容替換成為接下來的兩段配置：

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

設定一個斷點

1. 在 src/components/HelloWorld.vue 的 line90 的地方設定一個斷點，這裡的 data 函式返回一個字串。
2. 在根目錄開啟你慣用的終端並使用 Vue CLI 開啟這個應用：

npm start

1. 來到 Debug 檢視，選擇 ‘vuejs: chrome’ 配置，然後按 F5 或點選那個綠色的 play 按鈕。”
2. 隨著一個新的 Chrome 例項開啟 http://localhost:8080，你的斷點現在應該被命中了。

轉載自:github - 在 VS Code 和 Chrome 中除錯