在 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函數返回一個字符串。設置一個斷點

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

3. npm start

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

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