How To Debug React Apps Like A Senior Developer

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:

🌎 Find Me Here:

⏱️ Timestamps:

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

#ReactJS #WDS #ReactDevTools

[alexfoxleigh]

I’ve been a dev for 26 years. Am now a technical architect.

I use these tools occasionally but 99% of the time I just use console logging. It’s quick and it’s simple and it does the job the vast majority of of the time.

[jason_v]

Ironically, the more "senior" I get (20 years) the less I feel a need for these things. A few strategically placed console logs tend to be sufficient for most bugs. Impressive though!

[yt-sh]

awesome, we need more senior developer type videos

[vishalsinghpanwar]

more senior dev type videos please, helps a lot to build intuition, learning right way to think and muscle memory for resolving stuff right from the beginning! Super helpful ❤❤❤❤❤

[shainemamigo]

I just wanna say thank you bro, been watching your vids during my days as practicing coding and finally got a junior dev position.

[LukeLogan-xrpr]

This is great- Im a senior dev (10 years), but the biggest challenge for debugging react apps now is the number of packages that use context to wrap around the parent component, and screws up normal rendering and react behavior. It can be really challenging to see what caused a re-render: css, context, props, hooks, etc. Then, using refs throughout adds another pile of complexity.

[ken_bekov]

At last, a useful content without clickbait name. That's why I subscribed this channel initially. Good job!

[Alexanderthenotsobad]

I have been following this "kid" for so long, but I'm only now starting to fully understand all his "black magic". Thank you for all your vids, even the ones I had to watch over and over, and even the ones I could never fully grasp.
To all the OGs arguing that they know better because they have long-term experience that trumps modern gadgetry. You're right. Back in the day, we used to set up breaks, and have to manually parse through the code, variables, functions, and the like to see what was what, and what was breaking where. Remember, this is a new generation of coders who grew up with more precise tools. That being said, that's the main reason I have not been able to keep up with a great deal of this modernity. Sometimes a simple console.log does do the trick.

[fahadrxfy]

Amazing video. I always thought that react dev tools would be kind of hard to use and understand but this video has proved otherwise. Now I find them much easier to learn. thank you.

[yashsharma]

Great tips. Loving your videos from past 2 years. Always learns something new

[HHJoshHH]

Probably the best actual teaching channel for JS devs besides Dave Gray or Kevin Powell the css master. Great job as always Kyle! Sub 4 life!

[jaydeep-p]

I never knew react dev tools were so useful!!!

[genshian]

Love this! BUT, here is some constructive feedback... Stop with the clickbait titles, and FOMO material to scare people to learn concepts. I have to always filter out so many parts of your messaging in my head to ensure I'm learning this because I want to vs. doing it because I'll be useless otherwise. Focus on more objective content, let your viewers decide the value of it and for you not to state what the industry is based on your personal opinion on how it should be. Your standard is way to high (which is why your content is good), but as I can see in the comments your statements around the industry are just not good for peoples minds. That said, no content like this online rn, so I'll keep watching you! <3

[issiagaconde]

yes you're a genius. I was searching for this kind of tutorial. Merci beaucoup ❤❤❤

[markchen]

Thanks, this saved my career as a frontend engineer

[maxwellcoding]

Would be awesome to see something similar, but for React Native.

[patrykkuniczak]

I was using it many times, but i haven't known this tool have that much features.
Thank you for this video ❤

[JuanGómezCarrillo]

Great job as always!!! I personally would have explained a bit more about the Profiler. There're indeed no really good resources about this tool on the web and having a real-time app analysis would be great and very instructive.

[wizardos]

Always I learn with yours videos, just the essential and simplify version, good job!!!

[dizzland]

a Ton of very useful information for getting into React debugging