How To Debug React Apps With VS Code - Boost Your Debugging Productivity

00:00 - First Marker
00:22 - Create launch config
01:19 - Run Chrome via VS Code
01:37 - Example bug to be fixed
02:02 - Open the source code in VS Code via the error message
02:08 - Set a breakpoint
02:12 - The debugger in action
02:34 - Set a conditional breakpoint
02:57 - Why the callstack or "Step out" doesn't work with React
03:18 - Find the parent component with VS Code's global search
03:33 - Inspect variables in the debugger
03:44 - Edit variables in the debugger
04:27 - Use "Step Into" to narrow down
04:43 - Sometimes breakpoints don't work
04:54 - Fix the bug

[Dysfunctional]

Proper debugging is quite a rare topic to be covered both in universities and online courses - yet you've delivered it in a digestible way

[returncode]

Finally someone who emphazises true debugging skills, a very rare captured topic in web dev. Me coming from java/spring (IntelliJ Ultimate debugger is my best friend!) never understood that this topic is so poorly covered in the web dev community (but it could be better in the java community too).

Great work, thumbs up!

[dios]

Works great using your stack. Thanks for providing the resources! Subbed.

[SoreBrain]

This looks like a super power compared to my console log code snippet

[dokyezr]

You hooked me as your subscriber. congratulations 🎉

[shashishekhar----]

Thank you for this brother, much appreciated.

[LalitTaparia]

Thanks for helping me to start debugging in vs code

[faysalahmedakash]

I get the blank page, not like yours describing the error in chrome tab

[manyooyooman]

how to make chrome run in normal mode and not incognito? with incognito mode i have to login every time with 2fa, which is time wasted

[raygan]

Hi, the "Get the source code" button on your blog is not working, The modal is empty

[dios]

This isn't working as of today. All breakpoints are "unbound". Do you know why that is?