vscode 使用JavsScript debugger 插件调试Vue+vite项目

vscode 使用JavsScript debugger 插件调试Vue+vite项目，JavsScript debugger 插件是vscode自带的，我用的vscode 版本Version: 1.88.1

插件有了，试着点击vscode 运行和调试按钮

选择Web App(Chrome)

出现Launch Chrome against 点击运行

启动了Chrome，项目启动失败，因为调试的端口默认是8080，而项目的端口是5173 并且自动生成了launch.json文件

需要先启动项目npm run dev 或者yarn dev, 把launch.json端口改成项目的端口，关掉先前调试的浏览器窗口，重新开始运行调试。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173", // 换成项目的端口
      "webRoot": "${workspaceFolder}"
    }
  ]
}

进入断点了，但是另一个文件断点却是没生效，unbound，因为项目还没执行到没生效的那个文件，执行到这个文件，就生效了，如下图

总结一下插件调试流程

1. 先确保用的vscode有JavsScript debugger插件，vscode默认自带，太低版本就没有
2. 配置JavsScript debugger插件，launch.json,如果不会配置，就直接点击调试，会自动生成，到时候改下配置文件的项目端口
3. 增加调试点，启动项目

也可以新建js debug terminal 运行项目打开调试断点

---

想要在vite.config.ts打断点，需要新建JavaScript Debug Terminal,在这个窗口运行项目，断点自动执行

提示‼️

vite版本升级后，我的vite版本5.4.19升级到7.1.2后(2025/08/14)，下面这种方法就不行了，vite.config.ts就打不上断点了

想要在vite.config.ts打断点，需要新建JavaScript Debug Terminal, 在这个窗口运行项目，断点自动执行