How to debug react app with vscode

In order to debug a react application in vscode, we don't need to install any extension anymore as vscode now includes all the features required for debugging.

Here are the steps I used to debug my react application:

1. The react project was created with create-react-app and was running on port 3000 by default.
2. First go to Run & Debug view and create a launch.json configuration file (if you haven't already) and choose Chrome as the type.
3. Now, since your app is running on port 3000, change the port in the url parameter to 3000 instead of 8080.
4. Set some breakpoints and then click on run and a debug instance of your app should start.

The final launch.json config file looks like this. I am using Edge so the type in my case is different.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}