VS Code 使用 Debugger for Chrome 調試vue
配置：
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
使用流程：
1、安裝
Debugger for Chrome插件
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、命中斷點
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。