vscode debugging not working

[cesarvarela]

If I follow the instructions here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor
I can't get breakpoints to work.

I get the infamous Breakpoint ignored because generated code not found (source map problem?). so I think this has to do with sourcemaps not being generated where they should be or something like that.

(Verified that it works with the default create-react-app)

[KyleGobel]

Typescript is trickier to get to work in the debugger. I think it has something to do with with the launch.json paths we're using (I don't think they're the ones the default readme shows) I haven't spent a bunch of time trying to get it to work (yet), but if/when someone does I feel like we should document that somewhere around here :).

Would love to have this work.

[eyelidlessness]

I just figured this out. In your launch.json, change "webpack:///src/*" to "webpack:///./src/*".

[wiredprairie]

Thanks to the tip from @eyelidlessness, I used the configuration below in launch.json and breakpoints are now working when launching Chrome via VS Code:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "userDataDir": "${workspaceRoot}/.vscode/chrome",
    "sourceMaps": true,            
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
    } ,            
    "runtimeArgs": [
        "--disable-session-crashed-bubble",
        "--disable-infobars"
    ]
}

I also added to .gitignore:

/.vscode/chrome

[mindjuice]

Has anyone managed to get debugging of Jest unit tests working in vscode?

[wmonk]

Closing as this hasn't been updated in a while.

[mlesk]

Sorry to hit the closed issue, but looks like some progress has been made in this area, see this CRA issue.

Matt Morgis came up with this configuration that is working for me nicely within VS Code 1.17.0 with Node v8.4.0 and react-scripts-ts 2.7.0 I am finally able to run and debug tests directly in vscode.

Here is the vscode launch command that is working, the only change from original posted is changing reference from react-scripts to react-scripts-ts:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug CRA Tests",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
        "runtimeArgs": [
          "--inspect-brk",
          "test"
        ],
        "args": [
          "--runInBand",
          "--no-cache",
          "--env=jsdom"
        ],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      }
    ]
}

[quantuminformation]

@mindjuice did you have any luck debugging Jest unit tests? I'm having no luck with Webstorm, but it works find in CRA-js

[steranka]

I tried using vscode on CentOS 7 with vscode (1.19.1), react-scripts (v2.15.1) and chromium-browser (v61.0) but got the error that type="chrome" was not supported.

Next, I I edited the file in my node_modules directory (a hack but worth trying). I changed node_modules/react-scripts-ts/config/webpack.config.dev.js

devtool: "inline-source-map"

and the location of my files are now in webpack-internal://, but I was able to view my code (in chromium-browser and set a breakpoint in it (in Chrome devtools, F12 on browser). Thanks @cesarvarela for pointing out the file that needs to be changed. NOTE: I picked inline-source-map because I think that is what the Angular CLI tools use (based on grepping for devtool:).

This doesn't fix vscode debugging but at least I've got something (other than console.log).

[Jonatthu]

This is still happening to me :/

[darbio]

Trick for young players attempting to debug in chrome using the above launch.json. It will open a seperate chrome window which is the only window which the debugger is attached to. You have to perform your testing in that window.