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

[@Dysfunctional704]

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

[@profydev]

Thanks for the feedback 🙂

[@returncode0000]

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!

[@thomasdinh2k]

We need more videos like this, sir

[@dios8256]

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

[@vickytestAC]

You hooked me as your subscriber. congratulations 🎉

[@shashishekhar----]

Thank you for this brother, much appreciated.

[@SoreBrain]

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

[@LalitTaparia574]

Thanks for helping me to start debugging in vs code

[@sus-net]

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

[@faysalahmedakash7703]

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

[@HappyLeoul]

Thank you!!

[@dios8256]

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

[@profydev]

Thanks for the feedback. Did you test it with the repo I provided?

[@dios8256]

@profydev no not with the same repo. I'm using latest of nextjs with server co.ponents which may be complicating things. I'll try with your stack later and update comments!

[@dios8256]

@@profydev this is working with your stack. Thanks for providing clear instructions to make this easy to setup and use. I now suspect this wasn't working for me because I'm using the new app router and server components. Sadly NextJs often has outdated documentation so their .vscode config doesn't work.

[@profydev]

Thanks for the feedback. Glad it works now. I should check it with the setup you described though. Any chance your repo is public?@@dios8256

[@dios8256]

@profydev it isn't right now, but I'm confident it will be due to using later versions of nextjs app router. There are asynchronous server components that make things difficult. For example, they don't work with jest tests. The nextjs docs provide a launch configuration example for the debugger setup. But sadly it has the issue where all breakpoints are unbound. I've had so many issues with async server components not working well with other libraries and tools

[@davidmc971]

Great video!

[@investandcyclecheap4890]

thank you! I will try this!

[@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

[@happilyconfuseddog8951]

ty sir

[@TmSourceCodeAcademy]

thanks