vscode debugging not working about create-react-app-typescript HOT 10 CLOSED

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

from create-react-app-typescript.

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

from create-react-app-typescript.

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

from create-react-app-typescript.

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

from create-react-app-typescript.

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.

from create-react-app-typescript.

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.

from create-react-app-typescript.

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

from create-react-app-typescript.

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

from create-react-app-typescript.

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).

from create-react-app-typescript.

This is still happening to me :/

from create-react-app-typescript.