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.
LOL me too. I've been doing this since the late 90s. I've tried using all of the newer/more complex tools, and they definitely have their use cases, but console.log is certainly simpler.
@@AbdurrahmanHafez Oh yeah, definitely not saying they are useless the force suspense and force error ones are super-useful. I'm just not using most of the debugging tools all that often. Especially breakpoints and IDE debugging. I don't think I've ever used that.
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.
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 ❤❤❤❤❤
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!
almost 20 years web dev here as well. Rarely use these tools. As you said: a few well places console logs + a great designed system is all you need. if the code however is poorly designed, I can see the need for these tools to help understanding what the f is going on. I once redid an entire label-printing system, because everything was touching and changing global variables on all sorts of weird ways, making it completely impossible to understand what was going on. Maybe one of these debugging tools could have done a difference, but this was even back before nextjs or react was a thing. Maybe even before typescript was a thing, or in its infancy (8-9 years ago).
It's inspiring to see how experience can simplify your workflow! Ironically, as a newbie with 2 years of experience, I find that I often need to rely on all the new tools out there to be a good developer.
@@khairiyusoff5040 I think its because you get to a point where you know how the code is supposed to behave and know how to code around potential bottlenecks or problematic areas. Which also means that when you do run into bugs, your instincts tell you exactly where the problems might lie and all you need to do is to verify which one of them gives you the wrong data, needs a filter or what it is. But please use the tools you want to use that can help you not only fix the bugs but also learn whats going on “behind the scenes”. That, in my opinion, is one of the most valuable skills to have in this programming world. Knowing something as “simple” as why you cannot add two decimal point numbers together and then expect the result to be correct, or that most react components can and should be done without useEffect, because using useEffects will add several re-renders and you cannot expect the correct data from the get go, delaying everything below it. Essentially in React you are fighting against creating re-renders. There are instances where we actually go “around” some systems and get their data directly from cookie/storage on load, because otherwise we would have to wait on them spinning up first, delaying everything by several renders / miliseconds.
I started learning Javascript and coding in general a year ago. Now I'm working as a junior web dev, all that I've ever needed was and still is console log.
Just because console.log does the job doesn't mean your debugging is effective enough. Kyle is stressing the fact that with these things your debugging can become way quicker, also if only console.log does the job for you this means your issues that need debugging are basic.
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.
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.
I just commented the same thought. I wonder if it's because with more experience our code tends to be less convoluted and also we have an overall better sense of where the problems likely lie.
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.
Very useful, I use these a lot, if you have a big project with tons of deep-nested components, without these tools it would take you a lot of time to debug, especially when working with Promise and API
OOF, my debugging definitely looks like what we saw in the beginning of this video. And I can soooooo live without that. Thanks for this video Web Dev Simplified 🙂
While I agree with most of the comments (the ones I read) I tend to use logging more often than not... but some times that isn't an option. It is good to have these tools in your browser. I do use the dev tools all the time too.
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!
Brother can you suggest me linkedin social login library for React with Typescript which should be freeware and can be used in production. I tried many but none of them are working.
This isn't working for me. I'm using NextJS. It is server side code at the moment. I tried dev tools, and debugging with node.js server side and it ignores the breakpoints. I have a blog site that converts markdown to static files I tried editing launch.json and next.config.js for source maps etc to no avail.
I've been successfully avoiding debugging tools and using console log (or variants) for over 30 years now :) Trust me, you get much more efficient with it than you think. (im not saying more than with debugging tools)
I was in a senior position and I'm now at a company where they don't have these imaginary roles. Call me "company fish" or whatever as long it pays fair according to my experience lol.
@WebDevSimplified I apologize for writing this, I noticed your eyes, especially the left one, is starting to twitch more and more. I recognize fatigue when I see one, I've been there and I did not took measure when I had to, now I am with Menier disease and I cannot fix it for the rest of my life. I do enjoy your content, but I urge you to go make some medical tests and check for Menier disease as well, eye sight and hearing. They are related... Take care my friend and good health to you.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
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.
LOL me too. I've been doing this since the late 90s. I've tried using all of the newer/more complex tools, and they definitely have their use cases, but console.log is certainly simpler.
Thanks, I'm not alone!
I am a console logger too, but these tips sometime help and save some time
@@AbdurrahmanHafez Oh yeah, definitely not saying they are useless the force suspense and force error ones are super-useful. I'm just not using most of the debugging tools all that often. Especially breakpoints and IDE debugging. I don't think I've ever used that.
@@alexfoxleigh9443 as an architect your focus is probably on much more highlevel concepts than debugging individual react coponents 🙂
I just wanna say thank you bro , been watching your vids during my days as practicing coding and finally got a junior dev position.
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.
Yeah, same here... have you tried the ""@welldone-software/why-did-you-render" package? I could not make it work. :/
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 ❤❤❤❤❤
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!
almost 20 years web dev here as well. Rarely use these tools. As you said: a few well places console logs + a great designed system is all you need. if the code however is poorly designed, I can see the need for these tools to help understanding what the f is going on. I once redid an entire label-printing system, because everything was touching and changing global variables on all sorts of weird ways, making it completely impossible to understand what was going on. Maybe one of these debugging tools could have done a difference, but this was even back before nextjs or react was a thing. Maybe even before typescript was a thing, or in its infancy (8-9 years ago).
It's inspiring to see how experience can simplify your workflow! Ironically, as a newbie with 2 years of experience, I find that I often need to rely on all the new tools out there to be a good developer.
@@khairiyusoff5040 I think its because you get to a point where you know how the code is supposed to behave and know how to code around potential bottlenecks or problematic areas. Which also means that when you do run into bugs, your instincts tell you exactly where the problems might lie and all you need to do is to verify which one of them gives you the wrong data, needs a filter or what it is.
But please use the tools you want to use that can help you not only fix the bugs but also learn whats going on “behind the scenes”. That, in my opinion, is one of the most valuable skills to have in this programming world. Knowing something as “simple” as why you cannot add two decimal point numbers together and then expect the result to be correct, or that most react components can and should be done without useEffect, because using useEffects will add several re-renders and you cannot expect the correct data from the get go, delaying everything below it. Essentially in React you are fighting against creating re-renders. There are instances where we actually go “around” some systems and get their data directly from cookie/storage on load, because otherwise we would have to wait on them spinning up first, delaying everything by several renders / miliseconds.
awesome, we need more senior developer type videos
At last, a useful content without clickbait name. That's why I subscribed this channel initially. Good job!
😂😂
I started learning Javascript and coding in general a year ago. Now I'm working as a junior web dev, all that I've ever needed was and still is console log.
Just because console.log does the job doesn't mean your debugging is effective enough. Kyle is stressing the fact that with these things your debugging can become way quicker, also if only console.log does the job for you this means your issues that need debugging are basic.
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.
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.
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!
Oooooohhhhh yes you're a genius. I was searching for this kind of tutorial. Merci beaucoup ❤❤❤
what exactly is genous about using debugging tools
Great tips. Loving your videos from past 2 years. Always learns something new
I just commented the same thought. I wonder if it's because with more experience our code tends to be less convoluted and also we have an overall better sense of where the problems likely lie.
I was using it many times, but i haven't known this tool have that much features.
Thank you for this video ❤
Always I learn with yours videos, just the essential and simplify version, good job!!!
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.
Very useful, I use these a lot, if you have a big project with tons of deep-nested components, without these tools it would take you a lot of time to debug, especially when working with Promise and API
Thanks, this saved my career as a frontend engineer
I never knew react dev tools were so useful!!!
Priceless advices, each time. Thanks and congrats mate
a Ton of very useful information for getting into React debugging
A master class! Great tutorial!
OOF, my debugging definitely looks like what we saw in the beginning of this video. And I can soooooo live without that. Thanks for this video Web Dev Simplified 🙂
Amazing tutorial Kyle! Thank you
Thanks man for this great tutorial!
thanks great video, would love to see videos about how react handles ui updates and more advanced behind the scene stuff
While I agree with most of the comments (the ones I read) I tend to use logging more often than not... but some times that isn't an option. It is good to have these tools in your browser. I do use the dev tools all the time too.
You're amazing! A big thanks from 🇧🇷
thanks great video, would love to see how react works in detail and why sometimes ui delegates
Senior dev here, never needed more than console logs in 3 years of tech leading
The tools he is explaining are for productive senior devs. not for the classic senior devs
@@vigikaran aww you’re cute
Awesome! Thank you!
Thanks man, great walkthrough.
Great stuff!
Too much knowledge thank youu
Nice job! What colorscheme did you use?
I would love to see these tools on a more robust React app. Like in a more real-world setting
How do I debug the code inside of Canvas while developing 3D web/apps using Three.js, React-Three-Fiber...?
This was perfect thanks so much!
Do you plan on making svelte/sveltekit videos?
Overrated
I couldn't see the connection between seniority and using dev tools. Great video though. Hope we will see more.
HI!
How can I configure the debugger in WebChrome with webpack 5?
please make more videos brother. I am big fan of u
How can we achieve the REACT/NEXTJS debugging in webstorm IDE?
great video, thank
Would be awesome to see something similar, but for React Native.
Thanks for sharing 👍
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!
awesome content, thank u very much
P.S. Why does strict mode render twice? Really asking...
can I get any real time application of debugging video or example to large project ?
Brother can you suggest me linkedin social login library for React with Typescript which should be freeware and can be used in production. I tried many but none of them are working.
Great stuff
This isn't working for me. I'm using NextJS. It is server side code at the moment. I tried dev tools, and debugging with node.js server side and it ignores the breakpoints. I have a blog site that converts markdown to static files I tried editing launch.json and next.config.js for source maps etc to no avail.
why i use components tab , my shows : chunk.... in file name , does anyone have any idea what might be wrong
Have you tried project idx?
Does the nextjs debugger work for the app router?
Thanks
Nice, can you make this video with next JS 15 and turbopack? Please
Thanks 👍
Kyle, I really love your work but this head shaking all the time is giving me brain spasms :D Sorry, but I wanted to stress that out :D Great video :)
Can you please do the video of next js convert to electron js latest video
Thanks alot
more senior videos please
Let's always do alot of good ❤
Nam myoho renge kyo
switching off "Strict Mode" is also an option though.
thanks a lot for all of your usefull toturials❤,please create react hook form toturial, guys please like this comments if you wnat it to
Hi from Georgia🇬🇪 Can you show us your setup?👀💻🖥
thanks kyle
it is impossible to pay attention to code editor/web page while you keep bouncing your head on camera. seems those dog dolls to put over a car panel.
Bro create Penpot plugins 🎉
make sure to watch this video in 0.75 playback speed
good job
Bro this head will fall off one day I tell you💀
Sounds like a click bait. No senior can avoid console log.
This youtube channel is more about selling courses that doesn't really work in real life!
awesome
I've been successfully avoiding debugging tools and using console log (or variants) for over 30 years now :) Trust me, you get much more efficient with it than you think. (im not saying more than with debugging tools)
Junior, Senior, Manager are just payroll positions. It says nothing of your abilities to debug an app.
I was in a senior position and I'm now at a company where they don't have these imaginary roles. Call me "company fish" or whatever as long it pays fair according to my experience lol.
Typically a junior in any field has just started and a senior is someone who has a lot of experience. Kinda simple really.
Come on it is just the classification so we know the experience level, dont be so butthurt with the terms.
That was a click bait for new comers
What??? Then truck, car, motorcycle are just about fuel consumption. It says nothing about their carrying capacity 😂
This was helpful
I could have used this video in 2021 when I contracted for Facebook and there was really zero help from management on debugging React
pro tip. you actually have to start the app (npm start) BEFORE running the debugger.
u forgot to say sooner at the start "start building your dream projects SOONER" lol
4:11 u got me here😂😂 (only Indians will understand)
Stop shaking your head
❤
Please stop shaking your head only!
Where do we find these so called "Senior developers" who are mentioned in every advanced topic ever in youtube ??
React is a pain. Pain to use and debug.
my experience is that these tools have bugs sometimes😢.
Pro TIP: If you don't use REACT, you won't need to debug react.
Until next time 🏃
@WebDevSimplified I apologize for writing this, I noticed your eyes, especially the left one, is starting to twitch more and more. I recognize fatigue when I see one, I've been there and I did not took measure when I had to, now I am with Menier disease and I cannot fix it for the rest of my life. I do enjoy your content, but I urge you to go make some medical tests and check for Menier disease as well, eye sight and hearing. They are related... Take care my friend and good health to you.
Not that Vue js had vue devtools for months.... lol jk. All is Javascript in its core😊
You got 1.5 million subs but the vids are 20k views with a bunch of ai spam in the comments, what up woth that
thanks for your help, but please do something with that nervous head movement of yours. or at least, don't put your face on the video. do we need it?
Panjabi head live
3 mins
bro i like your content but please stop moving your head .
😆
I spray you 😂😂😂
Chat gpt can debug it faster and solve it as well
no, it cant
Hi @kyle if possible could be little bit slow like what I feel is your speaking too fast so unable to follow you
There is no senior ... It's scam 😂 you can work 40 years.. and can be junior 😆😆