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

gongzemin2024-05-03 10:16

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

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

选择Web App(Chrome)

出现Launch Chrome against 点击运行

启动了Chrome，项目启动失败，因为端口改为了8080 并且自动生成了launch.json文件

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

kotlin 复制代码

{
  // 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，因为项目还没执行到没生效的那个文件，执行到这个文件，就生效了，如下图

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

想要在vite.config.ts打断点，需要新建js debug terminal,运行项目，断点自动执行