This guide demonstrates how to configure the Visual Studio Code debugger for a React application.

Prerequisite

You already have a React application running in Visual Studio Code.

Create a VS Code debug configuration file

1. Open the Visual Studio Code Editor

2. On the sidebar, click the Run and Debug button

3. Click the Run and Debug button

4. Select Web App (Chrome) or Edge

This will create the launch.json file. The launch.json file tells VS Code how to launch the browser and attach the debugger to your React application.

5. On the created launch.json file, edit the "url" based on the default port of your app

1{
2    "version": "0.2.0",
3    "configurations": [
4        {
5            "type": "chrome",
6            "request": "launch",
7            "name": "Launch Chrome against localhost",
8            "url": "http://localhost:5173",
9            "webRoot": "${workspaceFolder}"
10        }
11    ]
12}
Copy

6. Finally, start the application in debugging mode by clicking Start Debugging or pressing 'F5.'

🎉 That’s it! You can now set breakpoints, inspect variables, and debug your React application directly from VS Code.