vscode中調試vue項目

在vscode中安裝調試插件並配置launch.json文件，這里按照vue官網的方法即可，點擊下方鏈接

在vscode中調試--傳送門

關於launch.json的配置

{
  "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}/*"
      }
    }
}

上面是vue官方文檔中給的配置，基本不用改動，需要注意的是url的配置

"url": "http://localhost:8080"

這里的url地址需要換成我們啟動項目的地址，不對應的話會提示無法訪問此網站！！！

啟動項目、設置斷點、開始調試

正常啟動項目即可

調試可以鍵入F5或者ctrl+shift+d進入調試菜單點擊綠三角

此時已經可以正常進行斷點調式

有問題歡迎留言💨💌