vscode启动vite+Vue3项目调试功能，QQ浏览器为例

入坑摸鱼2025-04-08 10:11

1、增加launch.json配置

javascript 复制代码

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome", // 或 "pwa-msedge" 如果使用 Edge
      "request": "launch",
      "name": "QQ调试",
      "port": 9222,
      "url": "http://localhost:5173", // 替换为你的 Vite 项目地址
      "webRoot": "${workspaceFolder}/front/src", // 指向项目源码目录
      "sourceMaps": true, // 必须启用源码映射
      "runtimeExecutable": "D:\\Program Files\\Tencent\\QQBrowser\\QQBrowser.exe", // 替换为 QQ 浏览器的实际路径
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ]
    }
  ]
}

2、查看是否成功

访问 http://localhost:9222/json/version，展示效果如下图，则证明成功。否则地址应该是打不开的。

3、启动项目，启动debugger

如案例项目为vue+vite3项目，启动后端口为5173，代码的行数前打断点，如图。然后点击绿色的小箭头，启动debugger。

成功的话，会进入到vscode的代码断点处。

注意：如果浏览器里当前项目地址"http://localhost:5173"打开了F12的话，断点就会执行在F12控制台里，而不是vscode里了。