Firefox在Visual Studio Code调试时无法打开

Question

当我使用Chrome的启动配置开始调试时，浏览器会打开。但当我使用Firefox的启动配置时，浏览器不会打开，尽管Firefox进程已经启动，并且没有错误消息。

• Visual Studio Code 1.36.1
• Firefox调试器 1.8.1
• Firefox 68.0.1
• Windows 10 1803
• Angular 7.0.0（无影响）

.vscode/launch.json：

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Chrome + localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "firefox",
        "request": "launch",
        "reAttach": true,
        "name": "Firefox + localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
      },
    ]
  }

- Marco Eckstein

---

我也遇到了这个问题，你有解决办法吗？我甚至无法让VSCode附加。我使用的是OSX系统。 - JimmyDeemo

不，Stack Overflow是我最后的选择。 - Marco Eckstein

我在这里尝试过了；https://github.com/firefox-devtools/vscode-firefox-debug/issues/178。希望会有所收获。 - JimmyDeemo

Answer 1

为使用附加模式，您必须手动从终端启动Firefox并启用远程调试。请注意，如果您不使用Firefox Developer Edition，则必须先配置Firefox以允许远程调试。要做到这一点，请打开开发者工具设置，并选中标有“启用浏览器 chrome 和插件调试工具箱”和“启用远程调试”的复选框（如此处所述）。或者，您可以在 about:config 中设置以下值：

Preference Name                          Value  Comment
devtools.debugger.remote-enabled         true   Required
devtools.chrome.enabled                  true   Required
devtools.debugger.prompt-connection      false  Recommended
devtools.debugger.force-local            false  Set this only if you want to attach VS Code to Firefox running on a different machine (using the host property in the attach configuration)

然后关闭 Firefox 并从终端启动它，如下所示：

Windows

"C:\Program Files\Mozilla Firefox\firefox.exe" -start-debugger-server

OS X

/Applications/Firefox.app/Contents/MacOS/firefox -start-debugger-server

Linux

firefox -start-debugger-server

导航至您的 Web 应用程序并使用此 launch.json 配置附加到 Firefox：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

如果你的应用程序运行在Web服务器上，你需要将url和webRoot属性添加到配置文件中（与上面第二个启动配置示例中相同）。

- N. Richli

---

我确信这对于“附加”模式是正确的，也许这就是OP真正想要的，但考虑到问题说Chrome可以正确打开而Firefox不能，我猜测“启动”模式才是所需的，这回答了一个不同的问题（我想在Chrome中使用附加模式也需要单独启动浏览器）。 - Auspex

Answer 2

我的配置和工作流程。

P.S. 我在about:config中更新了Firefox的配置，但是我没有像Google Chrome那样得到所需的简单结果。

我已经安装了以下浏览器（Ubuntu 20.04 x64）：

• Firefox for Ubuntu 94.0
• Google Chrome Version 96.0.4664.45 (Official Build) (64-bit)
• Microsoft Edge Version 96.0.1054.34 (Official build) beta (64-bit)

对于所有浏览器，我都没有更改它们的配置。

我的调试扩展（仅一个）：Debugger for Firefox。

我的VS Code：

Version: 1.62.3
Commit: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247
Date: 2021-11-17T08:00:36.721Z
Electron: 13.5.2
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.11.0-40-generic

配置

{
    "configurations": [
        {
            // Start Debug -> Open Firefox, Open Debug console, Click an line in JS File and F5
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Firefox + File",
            "file": "${file}"
        },
        {
            // Start Debug -> Open Firefox, Open Debug console, Click an line in JS File and F5
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Firefox + Server",
            "url": "http://localhost:8080/${fileBasename}",
            // "url": "http://localhost:8080/index.html",
            "webRoot": "${workspaceFolder}/public/"
        }
        {
            "type": "pwa-chrome",
            "name": "Chrome + File",
            "request": "launch",
            "file": "${file}"
        },
        {
            "type": "pwa-chrome",
            "name": "Chrome + Server",
            "request": "launch",
            "url": "http://localhost:8080/${fileBasename}",
            // "url": "http://localhost:8080", // the index file
            "webRoot": "${workspaceFolder}/public"
        },
        {
            "name": "Edge + Server",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:8080/${fileBasename}",
            // "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/public",
            "runtimeExecutable":"/opt/microsoft/msedge-beta/msedge"
        }
    ]
}

我可以在公共目录下运行我的index.html和其他HTML文件，作为本地文件和服务器页面。在我的服务器上，该文件位于public目录中。我从根目录工作，其中包括公共目录。

我只有在使用Firefox时才遇到了一些不愉快的问题。现在它可以使用以下解决方法和上述配置：

在Firefox中开始调试的步骤：

1. 使用提供的配置，如果需要，我们可以更改路径或文件 https://code.visualstudio.com/docs/editor/variables-reference。但是对于我来说，当我在URL中使用指定的文件时，例如/index.html，它就可以正常工作。
2. 启动调试（选择配置并按F5键）。
3. Firefox已经打开，但调试仍未起作用。
4. 打开DevTools（F12）。 是的，没有它，调试对我来说无法工作。
5. 重新加载页面（在浏览器中按F5或Ctrl + R或您的操作系统中的其他组合键）。
6. 调试已成功开始，可以使用断点。

我收到了VS Code的以下消息，但它可以在没有额外路径的情况下工作：

此文件的路径未映射到Firefox加载的任何URL。要么此文件尚未被Firefox加载，要么您的调试配置需要为此文件设置pathMapping - 您认为该文件已经加载并希望让Path Mapping向导尝试为您创建pathMapping？

我对Microsoft Edge浏览器进行了一些小修复。我将浏览器的bin文件路径设置为："runtimeExecutable":"/opt/microsoft/msedge-beta/msedge"。

- Oleg Dmitrochenko