目錄

• 一、在 VS Code 中配置除錯
• 二、debugger語句
• 三、 Devtools
• 總結

一、在 VS Code 中配置除錯

使用 Vue CLI 2搭建專案時：

更新 config/index. 內的 devtool property：

devtool: 'source-map',

點選在 Activity Bar 裡的 Debugger 圖示來到 DebuglVWaMwQA 檢視：

選擇Chrome/Firefox：Launch 環境。將 launch.json 的內容替換為：

{
  "version": "0.2.0","configurations": [
    {
      "type": "chrome","request": "launch","name": "vuejs: chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}/src","breakOnLoad": true,"sourceMapPathOverrides": {
        "webpacklVWaMwQA
 
:///src/*": "${webRoot}/*"
      }
    },{
  www.cppcns.com    "type": "firefox","request": "launch","name": "vuejs: firefox","pathMappings": [{ "url": "webpack:///src/","path": "${webRoot}/" }]
    }
  ]
}

開始除錯：

設定斷點：

#啟動專案
npm run dev

在debug頁面選擇“vuejs：chrome”：

二、debugger語句

推薦

function potentiallyBuggyCode() {
    debugger
    // do potentially buggy stuff to examine,step through,etc.
}

瀏覽器：F12開啟DevTools，當執行程式後，會停在debbger語句：

注意：當安裝了Eslint外掛時，點選快速修復，Disable no-debugger for this line.不然，儲存時會自動清除debugger語句。

三、Vue Devtools

谷歌瀏覽器的外掛。

詳情參考官方連結：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!