How to debug React app in VSCode

Learn how to debug your React app in VSCode.

Are you using this functionality in your workflow? Do you have any tips for other developers?

Or do you have any other questions? Let me know in the comments.

Premium Online Courses for front end developers and designers.

[rmanzman]

3 years later and it still works! thanks man

[mayank_upadhyay_]

I always felt debugging is a tool for experts and smart people, finally I am trying to use these tools.

[eclipsetutorialvideo]

Thanks, it helped. Just you forgot to mention we need to start the react app within the terminal with npm start Before running F5 :)

[Gabriel-cdjx]

Just came out of curiosity. It's my first look at vscode debugging tools. Very informative and super easy to follow. Thanks!

[voyageruk]

Another good video, thanks Petr. The way I use this approach is to attach to an existing window. To do this you need to change the "request": "launch" to "request": "attach" and also add "port": 9222 and I had to change "webRoot": "${workspaceFolder}/src" to add src folder or source mapping failed. Finally on windows at least you add --remote-debugging-port=9222 to the launch target for chrome.

[sanjeetpathak]

Awesome man! Console debugging was always a pain in ass!

[md.shamswadudabbir]

OOO Man!!! You just save my precious time. Project dead line in knocking at my door. It will save me hours of time In-Sha-Allah.

[Ryo]

All this time, I coding without using debugger. Thanks for explaining a debugger is

[eugenekim]

Cool tutorial. Can you release new tutorial with the bundle JS Debugger as VS Code recently introduced and Chrome debugger is now deprecated?

[DineshVutukuru]

very simple video but with lot of information.

[einfacherkerl]

Ok you only showed the debugger hitting break point but dind't show step thru or step over.
When I try Step Over or Step Into, every line executes multiple times. Why is this happening?

[jamesdaniels]

Great vid. One thing I can't work out is how to leave debug mode. How do I stop the panel below being orange and how do I get rid of the floating toolbar without going through my settings?

I've had to resort to disabling the extension and reloading VS Code, but surely there's a simple way to switch on/off debug mode?

[pizagno]

I keep seeing "Breakpoint set but not yet bound", and VScode does not stop at the breakpoint. Any ideas?

[mrutyunjayarath]

Thanks bro, very quick guide, great work (Y)

[shekharaakula]

I think that this would be very helpful, installing it right now.

[ganeshkoilada]

Thanks a lot, It was a cool explanation

[simenwu]

Does the debugger work if I work with React + Typescript?

[Submersed]

Is there any difference between this and the chrome debugger? I keep running into a problem with the chrome one where it won't stop at the breakpoints, and stop at other code instead.

[julianrico]

hey friend thank you very much. Greetings from Colombia

[rajeshgsn]

how to debug my own library which is referred in app through package.json ??