在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了