Problems debugging a barebones create-react-app

[extricator]

I'm trying to debug a barebones create-react-app and I'm a little bit confused by the instructions on how to setup vscode-firefox-debug. Below is my launch configuration:

    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "url": "http://localhost:3000/index.html",
      "webRoot": "${workspaceFolder}"
    }

First, just launching my app from vscode is not enough for me to be able to debug it: it doesn't launch the app at all. I had to start the app from the terminal and then launch this configuration for vscode to start debugging the app, is that how it's supposed to be done? The Chrome debugger documentation makes this explicit but I'm not sure if that is the case for the Firefox debugger as well. Second, the launch configuration included in the documentation didn't work before I added the port number to the url field, was it supposed to work without it? Not sure if something is just fundamentally wrong in my setup or if it's working like it's supposed to now. Any help or pointers to further documentation to read would be appreciated.

[extricator]

Even with those modifications the debugging it's not very effective. Breakpoints set inside JSX files are "moved" as if the debugger can't get too deep into the jsx tags. Example: I have a breakpoint on the h1 element but the debugger moves the breakpoint to the div element when I launch it and never gets to the h1. Chrome debugger works great out of the box fwiw: it breaks on the h1 element and I can inspect the current values of the object.

export const CardList = props => (
  <div className='card-list'>
    {props.monsters.map(monster => (
      <h1 key={monster.id}>{monster.name}</h1>
    ))}
  </div>
)

[hbenl]

I am currently rewriting the sourcemapping code in the extension (mostly to improve performance and support the new UI for column breakpoints). It will become more similar to how Firefox' built-in debugger handles sourcemaps and since that works a lot better with this example, the rewrite should improve things.

I had to start the app from the terminal and then launch this configuration for vscode to start debugging the app, is that how it's supposed to be done?

Yes, the debugging configuration will only launch the browser, it doesn't know anything about how to start the server. And since it doesn't know that the server runs on port 3000, you had to add this manually to the configuration.

Not sure if something is just fundamentally wrong in my setup or if it's working like it's supposed to now.

Yes, it is working like it's supposed to work now. I'm thinking about adding recipes for the most popular setups (which currently seems to be create-react-app, angular cli and vue cli).

[extricator]

Yes, it is working like it's supposed to work now.

Thanks for letting me know.

I am currently rewriting the sourcemapping code in the extension (mostly to improve performance and support the new UI for column breakpoints).

I'll look forward to that because as it is it's not really that useful as a vscode debugger, that's why I assumed it was due to a screwup on my part.

I'm thinking about adding recipes for the most popular setups (which currently seems to be create-react-app, angular cli and vue cli)

That'd be very useful. Thank you!