21

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"
      }
    ]
  }
Improve this question
2
  • 1
    Are you trying to debug the client (JavaScript within the browser) or the server (JavaScript within Node.js?) Commented Mar 9, 2022 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. Commented Mar 9, 2022 at 17:38

3 Answers 3

Reset to default
26

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)

enter image description here

  1. 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 .

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

  1. 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.

enter image description here

  1. The the break point will be hit.

enter image description here

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

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

23

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.

Improve this answer

5 Comments

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
Tante grazie, Mirco! I feel I owe you part of my salary XD
Ahahah! I'm very pleased to be helpful :)
Should be "type": "chrome" now. Is "version": "0.2.0" still needed?
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.
3

I have a slightly improved way of doing this that will start the development server when you click on the green run arrow.

  1. Create a tasks.json file inside of your .vscode folder (docs)
  2. Create a new task to start the server
{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Start React App",
        "type": "shell",
        "command": "npm start",
        "options": {
          "cwd": "${workspaceFolder}/apps/client"
        },
        "isBackground": true,
        "problemMatcher": {
          "owner": "custom",
          "pattern": {
            "regexp": ".",
            "file": 1,
            "location": 2,
            "message": 3
          },
          "background": {
            "activeOnStart": true,
            "beginsPattern": "Compiling...",
            "endsPattern": "Compiled successfully"
          }
        }
      }
    ]
  }
  1. Add this task as a preLaunchTask to launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch React App",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/apps/client",
            "preLaunchTask": "Start React App"
        },
    ]
}
Improve this answer

2 Comments

Over the years I've had to look this up multiple times (because documentation, am I right?) and this is the most concise and clear-to-understand answer I've ever found on the topic. Many thanks.
This solution worked for me with an ejected CRA app with Typescript / JSX 😎

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.