VSCode調試vue項目

先決條件

---

 

首先你必須安裝好 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