VS Code调试器配置在Firefox中调试React

Question

我使用create-react-app创建了一个React应用，并想在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}。

我甚至像debugger documentation中所描述的那样配置了Firefox，并使用firefox -start-debug-server启动了Firefox，并且＆＃34; launch＆＃34;模式。但没有任何效果。

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

Answer 1

您的路线正确，但您的pathMappings可能略有偏离。通过右键单击VS Code中“加载的脚本”面板中显示的目录，然后单击“映射到本地目录”，然后选择文件系统上与所示目录对应的目录，可以找到正确的路径映射。在调试器中。这将在您的launch.json中添加一个pathMappings条目。经过一番尝试和错误，这是对我有用的配置：

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