VS Code debugger config to debug React in Firefox

Question

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.

The config looks like this:

{
  "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}/*"
      }
    }
  ]
}

Debugging with Chrome works fine.

I tried a few variants:

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

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

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.

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

Answer 1

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}/"
    }
  ]
}