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, IE 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 start the development server using npm start from a separate terminal, then press F5 or the green arrow to launch the debugger and open a new browser instance.

Reference: Debugging React

.vscode/launch.json

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

Answer 2

It is sample projecet react

npx create-react-app my_app

1 Create Launchjsonfile if you haven't. this automatically create

2. select web app (chrome)

3.change port number 8080(default) to 3000 (or your assigned port)

4.Take package.json. you can see the scripts and you focus on start word the the debug script will automatically suggest click on it .the application run on port localhost:3000

or

5.you can check on browser

6.now add break point on the starting of the application here (where you want)

7. click Launch chrome

8. refresh page .now you can see the break point hit

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