1. 程式人生 > 實用技巧 >vscode中除錯vuejs程式碼

vscode中除錯vuejs程式碼

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.設定斷點,並點選齒輪圖示左邊的綠色三角按鈕啟動瀏覽器