title: VS Code debugger config to debug React in Firefox
body: <p>I've a React app created with <code>create-react-app</code> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/l5bqJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l5bqJ.png" alt="enter image description here"></a></p>
  
  <p>The config looks like this:</p>
  
  <pre><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}/*"
        }
      }
    ]
  }
  </code></pre>
  
  <p>Debugging with Chrome works fine. </p>
  
  <p>I tried a few variants:</p>
  
  <pre><code>{
    "name": "Firefox",
    "type": "firefox",
    "request": "launch",
    "url": "http://localhost:3000/",
    "pathMappings": [{
      "url": "http://localhost:3000/",
      "path": "${workspaceFolder}/src"
    }]
  }
  </code></pre>
  
  <p>... and the same with <code>${workspaceRoot}</code> instead of <code>${workspaceFolder}</code>.</p>
  
  <p>I've even configured Firefox like described in <a href="https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug" rel="nofollow noreferrer">debugger documentation</a> and started Firefox with <code>firefox -start-debug-server</code> what shouldn't be necessary in "launch" mode. But nothing worked.</p>
  
  <p>What is the correct launch.json to debug a React app in Firefox. </p>