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

【问题标题】：VS Code debugger config to debug React in FirefoxVS Code 调试器配置在 Firefox 中调试 React
【发布时间】：2018-08-16 15:37:51
【问题描述】：

我有一个使用 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，这在“启动”模式下是不必要的。但没有任何效果。

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

【问题讨论】：

标签： reactjs debugging visual-studio-code

【解决方案1】：

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

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

【讨论】：