vscode：将调试器附加到 Firefox

Question

我正在尝试调试附加到我的火狐浏览器。我的配置是：

{
        "name": "Attach to Firefox",
        "type": "firefox",
        "request": "attach",
        "port": 6000,
        "pathMappings": [{
            "url": "https://localhost:3000/",
            "path": "${workspaceFolder}"
        }],
        "log": {
            "fileName": "${workspaceFolder}/log.txt",
            "fileLevel": {
                "default": "Debug"
            }
        }
    }

未达到断点。

我正在面临同样的问题。

显然，我在启用调试服务器的情况下启动了 Firefox，并且 vscode 连接到：

firefox -start-debugger-server

有任何想法吗？

Answer 1

对我来说，您首先需要连接远程 FF 调试器https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug 如果连接正确，您将在 URL 字段中看到红色背景

比你需要准备非常简单的配置，例如在我的例子中

  [...,
    {
        "type": "firefox",
        "request": "launch",
        "name": "Launch firefox against localhost",
        "url": "file:///home/admin/AngularProjects/JsMax/finished/index.html",
        "webRoot": "${workspaceFolder}"
    }

使用 .html 页面启动 JS 也有两种主要情况 - 其中一种是“在实时服务器上打开” https://github.com/ritwickdey/vscode-live-server-plus-plus，第二种情况是“默认打开”浏览器” https://marketplace.visualstudio.com/items?itemName=peakchen90.open-html-in-browser - 在第一种情况下，我们在主编辑器窗口上使用上下文菜单，在第二种情况下，在项目三上使用上下文菜单。第一种情况与 Node.js 完美配合，第二种情况适用于普通 JS。

在本例中，我使用带有普通 Javascript 的调试器，因此我在默认浏览器上单击“打开”，我在 URL 上看到红色背景（这意味着 FF 远程控制），您可以在 VS code 上使用调试器（远程连接到 FF 的内容）

还有两个变量，你可以在 about:config 上设置

 devtools.debugger.remote-enabled   true    
 devtools.chrome.enabled    true    

或者您可以在 Firefox 开发工具的设置选项卡上看到相同的变量（位于右栏底部）

并且，请注意，如果你想调试仅 JS 函数（没有 FF），你当然需要另一个配置（并安装 Node.js），例如在我的例子中

    {
        "type": "node",
        "name": "Run Current File",
        "request": "launch",
        "program": "${workspaceFolder}/Basic/NullishAndChaining.js"
    }