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

Starting from a React sample project

npx create-react-app my_app

1. Open the my_app folder in vscode and press F5. A dropdown menu will appear. Select web app (chrome)

2. A .vscode/launch.json file will be created and opened. Change port number 8080 to 3000 which is the default port for the React sample project. If you need to change the port, see https://stackoverflow.com/a/41770848/7422838 .

3. Open package.json. If you hover over the start script a prompt window will appear with the option to either run or debug.

or simply use "npm start" from the terminal window.

4. A Chrome browser will open and connect to http://localhost:3000

5. Now add a break point at the start of the application or where ever you want.

6. Open the Run and Debug panel by clicking on the arrow icon (on the left side menu just below source control). Click on launch Chrome.

7. The the break point will be hit.

How it works(Gif) click on it for better quality

Answer 2

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.