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