Uploaded July 2024 | Updated September 2026, 1 week ago

---

*Master every React hook* with my *FREE React Hooks Course* - _25+ videos_ 👉 courses.webdevsimplified.com/react-hooks-simplified
*Become a mid-level React developer* with my *Full React Course* - _40+ hours, 200+ videos_ 👉 reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-l8knG0BPr-o

Debugging React apps can be a difficult process if you don’t have the right tools. That is why in this video I will show you what tools you need to debug React apps like a professional and also how to properly use those tools like a senior developer.


📚 Materials/References:

React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-l8knG0BPr-o
Next.js Debugging Docs: nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-vs-code
Debugging Crash Course Video: youtu.be/l8pe_MSX4Lc
Error Boundary Video: youtu.be/_FuDMEgIy7I


🌎 Find Me Here:

My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:57 - Install Dev Tools
01:47 - StrictMode Logging Tip
02:24 - Debugger Tips/Setup
04:43 - Next.js Debugger Setup
07:02 - Components Tab Features
13:45 - Components Tab Settings
15:05 - Profiler Tab Features
18:06 - Profiler Tab Settings


#ReactJS #WDS #ReactDevTools