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

user_221650 0
Viewed 5278

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"
      }
    ]
  }
react-scripts create-react-app visual-studio-code reactjs node.js
2 Answers

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}"
    }
  ]
}
user_155920480

It is sample projecet react

npx create-react-app my_app

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

enter image description here

  1. select web app (chrome)

enter image description here

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

enter image description here

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

enter image description here

or

enter image description here

5.you can check on browser

enter image description here

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

enter image description here

  1. click Launch chrome

enter image description here

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

enter image description here

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

enter image description here

user_77063540
Related