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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM