在VScode中如何在Vue项目里使用debug

1.安装必要的插件JavaScript Debugger

2.在".vscode"文件中添加launch.json文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMaps": true,
      "skipFiles": [
        "node_modules/**"
      ],
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

3.进行debug

1.按

Ctrl+Shift+D

打开调试面板。

2.启动 Vue 项目：在终端中运行

npm run dev。

3.

在 VS Code 中按

F5

或点击调试面板中的绿色三角形按钮开始调试。这会启动 Chrome 浏览器，并自动打开

http://localhost:5173

。

就可以进行debug了