配置:
launch.json
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://127.0.0.1:9528",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
官方說明文檔:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
使用流程:
2、Debugger 圖標來到 Debug 視圖,然后點擊那個齒輪圖標來配置一個
launch.json
的文件。如上圖,項目運行地址配置為:http://127.0.0.1:9528
3、項目設置斷點
4、在終端並使用 Vue CLI 開啟這個應用:npm run serve。實際代碼為:vue-cli-service serve
5、來到 Debug 視圖,選擇“vuejs:chrome/firefox”配置,然后按
F5 或點擊那個綠色的 play 按鈕
6、命中斷點