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刪除。



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