How to debug `create-react-app`s in visual studio code?

Question

I tried suggestions made here and in other places, but can't get the vscode debugger to work properly, I.E. breakpoints never become active 🔴 and of course they don't break.

The application is normally ran with npm start which calls react-scripts start.

I've tried these launch configurations:

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Launch Chrome against localhost",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
      },
      {
        // I adapted this from a config to debug tests
        "name": "create-react-app",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
        "args": ["start"],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal"
      }
    ]
  }

Answer 1

Your first launch configuration is fine, you just need to:

1. start the development server using npm start from a separate terminal;
2. press F5 or the green arrow in VS Code to launch the debugger and open a new browser instance.

Reference: Debugging React

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Update: Edited the answer replacing the deprecated pwa-chrome with chrome.