在 VS Code 和 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',

 

從 VS Code 啟動應用如果使用 Vue CLI 3 你需要設置 vue.config.js 內的 devtool 屬性：

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

　　

點擊在 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}/*"
      }
    }
  ]
}

　　

在 src/components/HelloWorld.vue 的 line90 的地方設置一個斷點，這里的 data函數返回一個字符串。設置一個斷點

1. 

2. 在根目錄打開你慣用的終端並使用 Vue CLI 開啟這個應用：

3. npm start

4. 來到 Debug 視圖，選擇 ‘vuejs: chrome’ 配置，然后按 F5 或點擊那個綠色的 play 按鈕。

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