react debugging vscode

working debug configuration react

Nach diversen Versuchen hat das so auf meiner Windows 10 E Maschine funktioniert mit aktuellem node.js 8 64bit. Damit laufen die Anwendung in Chrome und jest Tests mit dem in Visual Studio Code integrierten Debugger.

usage

launch.js vscode
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch react in Chrome after npm start",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src"
        },
        {
            "name": "react-jest-debug",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "--inspect-brk",
                "--nolazy"
              ],
            "env": { "NODE_ENV": "test" },
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}\\node_modules\\react-scripts\\scripts\\test",
            "args": ["--runInBand", "--env=jsdom"],
            "stopOnEntry": false,
            "console": "internalConsole",
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}
package.json npm added
"babel": {
  "presets": [
    "react-app"
  ]
}

Published by in programming and tagged debugging, javascript and testing using 108 words.