Debugging a React app is far from being an easy task... if you don't know the tools you already have, for free!

There are indeed some React-specific tools, but today let's see together one that actually works pretty much with everything!

I'll use a simple React app as a playground, but the exact same instructions work for any other framework and language in general, with some little tweaks.

I'm talking about the Visual Studio Code debugger.

_______________________________
Support my work: https://github.com/sponsors/Balastrong

Hit like and subscribe for more content! :D
Join the Discord community! Here's the invite: https://discord.gg/bqwyEa6We6

You can also follow me on the other platforms:
Twitter: https://twitter.com/Balastrong
dev.to: https://dev.to/balastrong
Home: https://leonardomontini.dev/
TikTok: https://www.tiktok.com/@balastrong
GitHub: https://github.com/Balastrong
Instagram: https://www.instagram.com/devbalastrong/
_______________________________

Sound effects from https://www.zapsplat.com

#vscode #reactjs #programming

Leonardo Montini 😼

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to set up and use the Visual Studio Code debugger to debug React applications. The guide covers creating a launch.json file, ensuring the correct port settings, running the application, and using debugging features such as breakpoints, variable inspection, and step functions. Additionally, the post introduces conditional breakpoints and highlights the use of the watch tab for real-time JavaScript expression evaluation.

Debug a React app with Visual Studio Code