vscode中除錯vuejs程式碼
阿新 • • 發佈:2021-01-08
1. 在vscode中安裝Debugger for Chrome外掛
2.在vscode的run或者debug頁籤中,找到齒輪按鈕。點選後選擇chrome會建立並開啟launch.json檔案
3.把launch.json檔案中的配置改成(注意url是你專案的地址)
"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}/*" } } ]4.把專案中config/index.js內的devtool屬性設定成source-map
5.使用終端npm run dev啟動專案
6.設定斷點,並點選齒輪圖示左邊的綠色三角按鈕啟動瀏覽器