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

Are you trying to debug the client (JavaScript within the browser) or the server (JavaScript within Node.js?) — Wyck, Mar 09 '22 at 17:01
@Wyck well, the app is in typescript, React is obviously a frontend framework, I want to debug the client with source maps that link it to my original ts code on my ide. — Petruza, Mar 09 '22 at 17:38

Mirco Bellagamba · Accepted Answer · 2022-11-15T09:19:46.627

17

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

start the development server using npm start from a separate terminal;
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.

edited Nov 15 '22 at 09:19

answered Mar 09 '22 at 16:58

Mirco Bellagamba

950
6
15

Thanks! I'd read the page you link but obviously didn't pay much attention to that one line `Ensure that your development server is running (npm start). Then press F5 or the green arrow` – Petruza Mar 09 '22 at 17:43
Tante grazie, Mirco! I feel I owe you part of my salary XD – Petruza Mar 09 '22 at 18:10
1

Ahahah! I'm very pleased to be helpful :) – Mirco Bellagamba Mar 09 '22 at 20:57
Should be `"type": "chrome"` now. Is `"version": "0.2.0"` still needed? – Justin M. Keyes Nov 11 '22 at 23:35
1

Thaks @JustinM.Keyes for pointing out the deprecated `type`, I've updated the answer. The version is still required according to the docs. I believe the VS Code team can use it to avoid breaking changes in future releases when updating the syntax. – Mirco Bellagamba Nov 15 '22 at 09:26

lava · Answer 2 · 2022-06-21T14:17:37.587

It is sample projecet react

npx create-react-app my_app

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

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