IT技术 - 用于在 Firefox 中调试 React 的 VS Code 调试器配置 - 吾爱随笔录

我创建了一个 React 应用程序，create-react-app并希望在 Firefox 中使用 Visual Studio Code 对其进行调试。但我无法设置断点。断点始终显示为灰色圆圈而不是红色圆圈。

配置如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "webRoot": "${workspaceRoot}/src",
      "url": "http://localhost:3000/"
    },
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

使用 Chrome 调试工作正常。

我尝试了几个变体：

{
  "name": "Firefox",
  "type": "firefox",
  "request": "launch",
  "url": "http://localhost:3000/",
  "pathMappings": [{
    "url": "http://localhost:3000/",
    "path": "${workspaceFolder}/src"
  }]
}

... 和${workspaceRoot}代替${workspaceFolder}.

我什至按照调试器文档中的描述配置了 Firefox，并使用firefox -start-debug-server在“启动”模式下不需要的东西启动了 Firefox 。但没有任何效果。

在 Firefox 中调试 React 应用程序的正确 launch.json 是什么。

{ "name": "Launch Firefox", "type": "firefox", "request": "launch", "url": "http://localhost:3000", "pathMappings": [ { "url": "http://localhost:3000/path/to/my-repo/", "path": "${workspaceFolder}/" } ] }