VS Code Chromium / Firefox 调试器“无法附加浏览器”

Question

在 Vite 项目上使用 VS Code 工作时，我似乎无法使用 Chromium 或 Firefox 启动或附加调试器。

发生了什么事

推出 Chromium

错误

无法启动浏览器：“无法附加到浏览器”

配置

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

连接铬

错误

无法连接到 localhost:0 处的目标：无法连接到 http://localhost:0 处的调试目标：找不到任何可调试目标

配置

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

启动火狐浏览器

错误

无声错误

配置

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

连接 Firefox

错误

连接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 代码 1.91.1（快照）
• Firefox 128.0.3（快照）
• 铬126.0.6478.182（快照）

其他信息

• 我可以将 VS Code 调试器与 Node.js 进程一起使用
• 我无法在以前可以使用的其他项目中将 VS Code 调试器与 Firefox / Chromium 一起使用
• 我上周安装了 Docker + Docker Compose（通过 Lando），并且我有一个

  dockerd

  进程不断运行（被杀死后立即再次启动）。

如果有人知道我如何调查这个问题，我会非常高兴。

谢谢。

Answer 1

我已经找到了针对我的问题中所写的四种配置的几种解决方法。总的来说，看来我必须明确调试器使用的端口。

铬

附上

这个答案在类似的问题上几乎总结了这一点。

我必须使用以下选项启动 chromium：

chromium --remote-debugging-port=9222

并且 launch.json 配置如下所示：

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

启动

为了启动 Chromium，我必须设置“runtimeExecutable”和“runtimeArgs”，我只能使其与自定义“--user-data-dir”路径一起使用。

    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "runtimeExecutable": "/snap/bin/chromium",
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "--user-data-dir=${workspaceFolder}/.vscode/chromium"
      ],
      "port": 9222,
      "url": "http://localhost:5173/*",
      "webRoot": "${workspaceFolder}"
    },

火狐

在配置 VS Code 之前，我必须配置 Firefox。进入

about:config

并设置配置选项，如 Firefox 调试器文档中所写：https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug

或者下载开发者版，然后使用 VS Code 扩展设置来设置可执行文件的路径

"firefox.executable": "/opt/firefox/firefox"

。

在这两种情况下，我还在 VS Code 扩展设置中配置了端口：

"firefox.port": 6000

附上

Firefox 需要使用

-start-debugger-server 6000

选项启动，但我没有设法让该选项以某种方式与开发者版本一起使用（可能是我的安装）。

启动

我还在 VS Code 扩展设置中添加了该选项：

"firefox.args": ["-start-debugger-server 6000"]

---

我仍然无法在 Firefox 中设置断点，尽管在 Chromium 中可以。我可能必须配置一些路径映射，但 VS Code 没有像以前那样提出一些路径映射，所以我将不得不稍微摆弄它......除非有人有解决方案......