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:
- The react project was created with
create-react-app
and was running on port 3000 by default. - First go to Run & Debug view and create a
launch.json
configuration file (if you haven't already) and chooseChrome
as the type. - Now, since your app is running on port 3000, change the port in the url parameter to 3000 instead of 8080.
- 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}"
}
]
}
Top comments (0)