How to setup Visual Studio Code debugger properly for React.js

Open the Visual Studio Code editor, and click on "Run and Debug" from the left sidebar panel or press Ctrl + Shift + D. After that a window will open like the image below.

Click on "create a launch.json file" and then another window will open like the image below.

From the dropdown select "Web App(chrome)" and a "launch.json" file generate. Inside the file, we have to update the following two lines.

      "url": "http://localhost:8080",

      "webRoot": "${workspaceFolder}"

We have to add a port according to our front-end server port and "/src" after ${workspaceFolder}

      "url": "http://localhost:3000",

      "webRoot": "${workspaceFolder}/src"

Save the file and now use the Visual Studio Code debugger by adding breakpoints, conditional breakpoints, and log points.

Now we can use VS code debugger for all the files inside the src folder.

When we open the Visual Studio Code debugger by pressing F5 or manually clicking on the "Start debugging" button, the Google Chrome browser will open. If we want to debug for different files, then we have to type a route like http://localhost:5173/header. The debugging option will work for that file.