VS Code调试器配置可在Firefox中调试React [英] VS Code debugger config to debug React in Firefox

问题描述

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

I've a React app created with create-react-app and want to debug it with Visual Studio Code in Firefox. But I'm not able to set breakpoints. The breakpoints always appears as a grey circle instead of a red circle.

配置如下:

{
  "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进行调试可以正常运行.

Debugging with Chrome works fine.

我尝试了几种变体:

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

...，与 $ {workspaceRoot} 相同，而不是 $ {workspaceFolder} .

... and the same with ${workspaceRoot} instead of ${workspaceFolder}.

我什至已经按照调试器文档中所述的方式配置了Firefox ，然后使用 firefox -start-debug-server 启动Firefox，而在启动"模式下则不需要.但没有任何效果.

I've even configured Firefox like described in debugger documentation and started Firefox with firefox -start-debug-server what shouldn't be necessary in "launch" mode. But nothing worked.

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

What is the correct launch.json to debug a React app in Firefox.

推荐答案

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

You're on the right track, but your pathMappings are probably slightly off. You can find the correct path mappings by right clicking on the directories that are shown in the "Loaded Scripts" panel in VS Code, and clicking on "Map to local directory", then choosing the directory on your filesystem that corresponds with the directory shown in the debugger. This will add a pathMappings entry to your launch.json. With a little trial and error, this is the configuration that worked for me:

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

这篇关于VS Code调试器配置可在Firefox中调试React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！