Could not get it working with Create-React-App

This is somehow-of-a-bug-report.

FWIW, I could not get it debugging working it working with CRE (https://github.com/facebookincubator/create-react-app) and Nightly.

OTOH, it works out of the box with the VSCode Chrome debugger.

While this might not be a bug of this VSCode extension I think CRE might be good use case that should work out of the box with the debugger. (Because CRE is very strictly defined in scope, has a fixed configuration and is very popular)

Any idea why it does not?

Here’s my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "Launch Firefox localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}",
      "firefoxExecutable": "C:/Program Files/Nightly/firefox.exe",
      "log": {
        "consoleLevel": {
          "PathConversion": "Debug",
          "default": "Error"
        }
      }
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

FWIW, in the log I see

INFO |005.672|PathConversion: Can't convert url C:/Users/jnachtigall/Devel/xxxmeinprojekt/src/App.js to path
INFO |005.672|PathConversion: Can't convert url C:/Users/jnachtigall/Devel/xxxmeinprojekt/src/components/Character.js to path

which seems to be the problem, but I have now idea why it does not work (whereas it does with Chrome).

[hbenl]

This is actually a bug in Firefox, you can work around it by telling the debug adapter to handle the sourcemaps itself instead of letting Firefox’ debugger backend handle them. Just add "sourceMaps": "client" to your launch.json and it should work (even without your pathMappings).

Some background info in case you’re interested: Firefox is moving the handling of sourcemaps from the debugger backend (the server side of the debug protocol) to the new debugger frontend (the client side of the debug protocol). I guess that since the new debugger frontend is now the default, the server-side handling of sourcemaps will soon be removed. I will probably also make "sourceMaps": "client" the new default in the next release.

[jay-hankins]

I’m experiencing the same thing with create-react-app (CRA). It appears as though Firefox (Quantum Developer Edition v.57) looks for the entire URL including localpath.

Here is my launch.json which I modified to make it work (Chrome included which is working):

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "name": "Firefox",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000/",
      "pathMappings": [
        {
          "url": "http://localhost:3000/Users/jhankins/dev/lemming/tundra/",
          "path": "${workspaceFolder}/"
        },
        {
          "url": "webpack:///",
          "path": "${workspaceFolder}/"
        }
      ],
      "log": {
        "consoleLevel": {
          "PathConversion": "Info",
          "default": "Error"
        }
      }
    }
  ]
}

In the logs, you’ll see lines like: Converted url http://localhost:3000/Users/jhankins/dev/lemming/tundra/src/store/configureStore.js to path /Users/jhankins/dev/lemming/tundra/src/Users/jhankins/dev/lemming/tundra/src/store/configureStore.js

unless you specify the full pathMapping URL to include the local filesystem. Firefox doesn’t actually request that URL, rather it is requesting http://localhost:3000/

So is this related, a separate issue, or am I just misunderstanding the configuration?