VS Code中Vite项目无法启动/附加Chromium/Firefox调试器求助

问题现象 #

启动Chromium #

错误信息

Unable to launch browser: "Unable to attach to browser"

调试配置

{
  "name": "Launch Chrome",
  "request": "launch",
  "type": "chrome",
  "url": "http://localhost:5173/*",
  "webRoot": "${workspaceFolder}"
},

附加Chromium #

错误信息

Cannot connect to the target at localhost:0: Could not connect to debug target at http://localhost:0: Could not find any debuggable target

调试配置

{
  "name": "Attach Chrome",
  "request": "attach",
  "type": "chrome",
  "url": "http://localhost:5173/*",
  "webRoot": "${workspaceFolder}"
},

启动Firefox #

错误信息

无提示错误

调试配置

{
  "type": "firefox",
  "request": "launch",
  "reAttach": true,
  "name": "Launch Firefox",
  "url": "http://localhost:5173/*",
  "webRoot": "${workspaceFolder}",
  "tmpDir": "${workspaceFolder}/.vscode/.vite"
},

附加Firefox #

错误信息

connect ECONNREFUSED 127.0.0.1:6000

调试配置

{
  "type": "firefox",
  "request": "attach",
  "name": "Attach Firefox",
  "url": "http://localhost:5173/*",
  "webRoot": "${workspaceFolder}"
},

软件版本 #

• Ubuntu 22.04.4 LTS
• VS Code 1.91.1 (snap安装)
• Firefox 128.0.3 (snap安装)
• Chromium 126.0.6478.182 (snap安装)

补充信息 #

• 可正常使用VS Code调试Node.js进程
• 此前能正常调试的其他项目，现在也无法使用Firefox/Chromium调试
• 上周安装了Docker+Docker Compose（通过Lando），dockerd进程持续运行，杀死后立即重启

排查思路 #

1. 检查Snap应用权限限制 #

Snap的沙箱机制可能阻断调试端口访问：

• 查看VS Code权限：执行 snap connections code，确认network-control、browser-support权限已开启，未开启则运行 sudo snap connect code:network-control 和 sudo snap connect code:browser-support
• 检查Chromium/Firefox权限：分别执行 snap connections chromium、snap connections firefox，确保网络类权限正常

2. 排查Docker/Lando的端口冲突影响 #

Docker网络规则可能干扰本地调试端口：

• 查看调试端口占用：执行 sudo lsof -i :9222（Chrome默认调试端口）、sudo lsof -i :6000（Firefox默认调试端口），确认是否被其他进程占用
• 临时停止Lando服务：执行 lando poweroff，再尝试启动调试器，验证是否恢复正常
• 检查Docker网络配置：查看是否有自定义localhost映射或端口转发规则覆盖本地调试端口

3. 修正调试配置 #

Chromium配置调整

• 启动配置的url字段移除*，改为 "url": "http://localhost:5173"
• 附加配置添加指定端口：增加 "port": 9222，同时手动启动Chrome调试模式：chromium --remote-debugging-port=9222，再尝试附加

Firefox配置调整

• 启动配置添加端口字段："port": 6000
• 开启Firefox远程调试：在地址栏输入about:config，设置devtools.debugger.remote-enabled为true，devtools.debugger.prompt-connection为false，重启Firefox后再尝试附加

4. 排查VS Code扩展问题 #

• 更新调试扩展：打开VS Code扩展面板，将Debugger for Microsoft Edge（Chrome调试依赖）、Debugger for Firefox更新至最新版本
• 禁用冲突扩展：临时禁用Docker相关扩展，重启VS Code后测试调试功能

5. 手动验证浏览器远程调试 #

• Chrome：手动运行 chromium --remote-debugging-port=9222 http://localhost:5173，访问http://localhost:9222，若能看到调试目标页面，说明浏览器端正常，问题出在VS Code配置或权限
• Firefox：开启远程调试后，运行 curl http://localhost:6000/json，若返回调试目标的JSON数据，说明浏览器端正常

内容的提问来源于stack exchange，提问作者raaaahman