How to config debug in vscode?

[LeeHyungGeun]

I don't have seen some to debug which launching by react-app-rewired in vscode. Does some know how to config the debug in VSCode?

[dawnmist]

Go to the menu item Debug -> Open Configurations, and add your command in the configurations section, like:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "name": "vscode-jest-tests",
        "request": "launch",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-app-rewired",
        "args": [
          "test",
          "--scripts-version",
          "react-scripts-ts",
          "--env=jsdom",
          "--runInBand"
        ],
        "cwd": "${workspaceFolder}",
        "console": "integratedTerminal",
        "protocol": "inspector",
        "internalConsoleOptions": "neverOpen"
      }
]

The one above is a working version for running jest tests in the VSCode debugger. The args array is the list of items you would normally use when running the command in the terminal. The example above represents:

react-app-rewired test --scripts-version react-scripts-ts --env=jsdom --runInBand

Break the line up according to where you have spaces in the command, and put each part in the args array. The name field can be whatever you want - it'll be used in the VSCode menus for choosing which debug command to run. For jest tests, the --runInBand makes jest run the tests one at a time, waiting for each async test to complete before starting the next.

Put a breakpoint at the line in VSCode where you want the debugger to stop (or add a debugger statement to the code there).

If you wanted to debug a web script, you can do it through VSCode - but I found that using Chrome DevTools instead was more useful in that case.