The Most Important Skill You Never Learned

Рет қаралды 182,296

Күн бұрын

JavaScript Simplified Course: javascriptsimplified.com/?utm...
Learning how to find, and solve bugs in your code is one of the most important skills you can learn as a developer. This is because most of your time spent as a developer will be spent debugging so you need to learn to become a master debugger in order to excel at programming. In this crash course I will teach you everything you need to know to master debugging.
📚 Materials/References:
JavaScript Simplified Course: javascriptsimplified.com/?utm...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:53 - Basic Debugging Tips
06:35 - How To Use A Debugger
14:55 - Breakpoint Deep Dive
20:22 - Watch Tab
21:50 - VSCode Debugger Setup/Features
29:33 - Network Tab
32:06 - Performance Tab
33:05 - Application Tab
33:28 - Lighthouse Tab
#WebDevelopment #WDS #Debugging

Пікірлер: 268

@user-pv3rq5ib3y Ай бұрын

How many people are here only use console log for debugging

@nustaniel Ай бұрын

I do it when I want to look up what a value of a returned variable is too without putting it into my script, in example say I want to know the value of document.getElementById("element-name").getBoundingClientRect().top, I type that into the console and I can see how it behaves while I scroll around to get a better understanding of the values I will be working with, or I can omit the .top entirely and see the array of values I can work with, like height to see how tall the element is, etc.

@EchoPrograms Ай бұрын

Uuuhh, I plead the fifth

@saisandeep8741 Ай бұрын

Still the best 😅

@user-mx1ek4sl2m Ай бұрын

I just learned about console log. I used to compile my react app down to web assembly and use IDA to debug it

@miloserus Ай бұрын

@@user-mx1ek4sl2mThat is a good approach, but I prefer to get really close by using a multimeter with a probe on my motherboard. then disabling the clock signal and replacing it with a pedal switch. Then you can do everything step by step, and It is good exercise.

@john_doe_2231 Ай бұрын

Please make more of these debugging videos , really helpful stuff

@shantanukudva4658 Ай бұрын

Hey man, Thank you for your videos! You really upskilled my knowledge to get through this javascript jungle. It's very overwhelming but you are really adding "simplified" in web dev simplified! Cheers

@bbkillen Ай бұрын

As a 40 year veteran I constantly amazed at young developers not wanting to use the debugger. If you are not using a debugger you should definitely give it a try. Not only for debugging but for testing. I almost never release a bit of code without stepping through it once to verify it works as it should.

@ajalanbrown2200 Ай бұрын

Thanks for this, I’ll try it out

@Pretagonist Ай бұрын

Yeah I use the debugger all the time. Sadly I sometimes have to work with code that doesn't have great debugger support and it hurts my sanity. I mean having logging isn't wrong but the debugger is the most important tool.

@z352kdaf8324 Ай бұрын

Yeah, try clicking 10,000 times through a loop. Log it!!

@teeesen Ай бұрын

There is a tendency to stick with what you know even after it is no longer the appropriate tool. The simplest thing is to use console.log or printf or whatever and that’s fine for really simple projects like you might do in university. Debuggers are really useful for tricky code and medium sized projects. On really large projects, you can waste a lot of time using a debugger. This is especially true when there is a lot of data structure that needs to be visualized. Having a good logging system then becomes indispensable. If reading the log doesn’t help you identify the problem, it will at least tell you where to set the breakpoints and when they should be activated.

@retakenroots Ай бұрын

@@z352kdaf8324 conditional breakpoints?

@heathenmonk1249 Ай бұрын

This is amazing, I didn't know you could do that with just the devtools, thanks!

@user-jz6vj9ie8n Ай бұрын

Well, I know the major part of tricks shown in the video, but there're few very powerful I've never heard of! Thank you for great video, Kyle!!!

@PedroCoelho98 Ай бұрын

Wow, that tip for debug from VSCode is golden! You are the man! 💪

@suchitsheth1192 Ай бұрын

One more debugging point if you want to be bit lazy Not lazy version: console.log("value", value) Lazy version: console.log({value})

@ZM-dm3jg Ай бұрын

Lazy deluxe version: Make a VScode snippet

@TylerR909 Ай бұрын

I cannot believe how many people don't do this. All the time when pairing up with coworkers I'm like... "Why are you writing it twice... just object-ify it."

@JacksDeadInside Ай бұрын

I think I’m in love with you for this tip omg.

@untalentedwebdev Ай бұрын

I cant believe i havent thought of this, oh wait i can believe.

@joe_duck Ай бұрын

Use this a lot, specifically for functions so I can test those at different points.

@DaveVanWagner 22 күн бұрын

That was great! I thought I knew a lot, but only what I *thought* I needed to know. Thanks for deep diving into all the options and the VS Code debugging too!

@josuedelossantos9442 Ай бұрын

Thank you Kyle this video has been really helpful to me.

@mastle313 Ай бұрын

Kyle's always been an amazing teacher, but this one really is an absolute banger. Thanks a lot for the free info!

@jomama55ful Ай бұрын

One thing to note about the error location. JavaScript is an interpreted language, so the error message shows the first line that was unsuccessfully read. it is possible that the actual error may be further up the file, as the interpreter attempts to make sense of the code till it can no longer make sense of it. it is true that data is a major cause of run time errors, but also bad syntax can be a cause, as the interpreter will often try to make sense of poor syntax and allow it to interpret code that is bad.

@64jcl Ай бұрын

Great overview of all the things you can do in the debugger tools. You only missed one bit, it is actually possible to modify the scripts directly in Chrome too so you can test out stuff without having to reload everything. I frequently actually fix a bug inside the debugger in Chrome first and do some more tests before fixing it in my code. When projects get bigger reloading everything can be a hassle at times.

@AmeerHamza-kn2uv Ай бұрын

I was really in search of this kinda video. Thank you for all the tips!

@abu2musa Ай бұрын

Been working for soo long with javascript and this debugging skills could have been quite helpful,, great video!

@zamanms396 Ай бұрын

The most important skill that I have ever searching for it. Thanks Man! you made my day.

@torquebiker9959 Ай бұрын

Thank you for all the tips and hints!!

@jordanhildebrandt3705 Ай бұрын

I've been writing code for years, but I still found a few nuggets in here. Thanks!

@ManjuSaiVenkat Ай бұрын

there is always a bigger fish

@tadaspetra Ай бұрын

After all these years I just learned the difference between step into and step. Great video

@markmaples7215 Ай бұрын

Helpful, for me 90% of writing code is write, test, debug, write, test, debug, build up piece by piece. If you do not have strong debug skills you are not going to be able to build up large programs. If you inherit code, debugging is most of what you do, in order to figure out what the code you inherited actually does (or does not do).

@joe_duck Ай бұрын

That is basically the same for me. I literally check after each block for the most part.

@arindambhattacharjee6286 Ай бұрын

Exactly a proper software developer words

@muammar88 Ай бұрын

Useful tips, thanks Kyle!

@pekkagronfors7304 Ай бұрын

Awesome info. Thanks.

@BMikel Ай бұрын

Thanks a lot. This is gold. Please do more tutorials on debugging. React and all good stuff

@MrNihilius Ай бұрын

you are a natural born teacher - many thanks!

@getprompted Ай бұрын

"I was blind, and now I can see!" Praise be to Kyle! 😍

@Ari-pq4db Ай бұрын

Awesome 🎉❤❤, thank you Kyle 😊

@rakarakic9397 Ай бұрын

Big respect to this chanel, content and creator 🙏

@TarasovFrontDev Ай бұрын

this is so far the best debug explaining video i've ever seen

@Ari-pq4db Ай бұрын

Super helpful, Thank you Kyle, Keep it up ❤❤❤❤❤❤

@boris7258 Ай бұрын

A must to know skill. Thank you!

@sahilbaig9860 Ай бұрын

absolutely needed this . ty

@santiczek4081 Ай бұрын

This is pure debugging sugar. Thanks!

@Rhysling2 Ай бұрын

Thank you Kyle! I knew much of this but boy did it spackle in the gaps! This is exactly the kind of tutorial I look for. Super appreciative! If by chance you read this, apologies, but… Semicolons! Yes, they matter.

@ProxusGaming Ай бұрын

extremly helpful, need such more videos

@Isagi__000 Ай бұрын

Great video man. Thanks.

@SriyanNakka Ай бұрын

Thank you, this is very useful!

@andru2625 Ай бұрын

Super helpful content. Thanks much!

@Foxxy_was_taken Ай бұрын

Truly Simplified , Thanks

@64jcl Ай бұрын

Another cool thing you can easily do within Javascript is to hijack the console.log function call and output it on a div you can e.g. dynamically show on top of your content. Admittedly the console in chrome is more powerful with how it displays objects so you would then have to implement that yourself. But at times I often like to have some simple debugger overlay in my actual page content, especially when watching some variables, but in those case I naturally make some kind of of custom logger class/object that all the code can use anywhere.

@schoolofbillt2656 Ай бұрын

I have always been intimidated by using an actual debugger, thank you so much for this video!

@yunokawaii1772 Ай бұрын

Bro this is Gold! Thx a lot :D

@wandreperes Ай бұрын

Awesome! Thanks a lot!

@marketfinds Ай бұрын

Thanks, a lot of good info here. Almost didn't watch because the title doesn't give much away.

@rahulxdd Ай бұрын

Great video Kyle.

@kamranmemon25 10 күн бұрын

Thanks a ton for this videos, we need more of this kind of debugging in depth videos. It would be really helpful if you can make something like performance optimisation in React or vue app.

@technicalugyen Ай бұрын

Hey sir, Thank you so much. It was so nice of you giving it for free.

@waleed28ful1 Ай бұрын

Amazing Thankyou soo much for this amazing content! ❤

@mrashad_com Ай бұрын

Very informative tutorial, thank you

@archamedis 5 күн бұрын

Hell yes! This the real practical stuff 🔥

@halfamoose Ай бұрын

This video was sorely needed.

@eudaimonian9473 Ай бұрын

How do I use the debugger if my frontend app is being deployed from within a docker container?

@DarkzarichV2 Ай бұрын

build code with debugger command in it and run it locally

@rafaelfeldfix114 Ай бұрын

Source maps

@wchorski Ай бұрын

if ur using Portainer it has a log output in the UI if ur using Docker Desktop, each container has a log view if just pure terminal idk

@DarkzarichV2 Ай бұрын

@@wchorski for terminal you just "docker logs" with a name or id of your container as a parameter. docker ps -a to find all running and stopped containers

@epotnwarlock Ай бұрын

Docker logs

@jonathancarnos4816 Ай бұрын

I really liked your video mostly on your use of the debugger. Could you talk more in the future about CSP ? thanks @kyle

@andythebritton Ай бұрын

Most of these were familiar to me, but it's always good to fill those gaps in the knowledge. Triggered breakpoints I imagine would be great when you need to break conditionally, but the dependency is not in scope.

@olegsubik Ай бұрын

That is actually an amazing video. I'm myself a dev with around 5 years of exp and I found several new things. Especially the debugging + vs code debugging section is priceless!

@ShinoVince1 Ай бұрын

This motivated me to actually get the debug from front js inside vscode I didn't immediately managed to do it on first try and abandoned the idea... but it's actually working now and way more convenient (except i have to bundle with the mapping in the same file, if you know how to bundle via bun with mapping in a separate file while still making it work... please give me the secret)

@iamparmjeetmishra Ай бұрын

You are amazing sir. After this video I can confidently say -> I can successfully debug any code. Thanks

@ullibao Ай бұрын

dude how did you know i've been looking for the error in my project for a week 😭😭😭 this video is a godsend

@SriyanNakka Ай бұрын

Same...

@pH7Programming Ай бұрын

Super cool one ⚡

@williambjork2777 Ай бұрын

I can’t believe how long I’ve been coding without knowing most of the tips in this video

@igomesigomes Ай бұрын

I wonder how you find complex bugs solutions without debugging the code. 🙂

@KvikDeVries Ай бұрын

@@igomesigomes with console.log :) and overextended brainpower. I too find this video enlightening, and looking forward to seeing how it will change my life. Probably a lot :) What I find most interesting though is that I did use debuggers and breakpoints in many other languages, and yet it didn't occur to me that JS has it too. s/most interesting/the real WTF to be/ - but then again, I'm officially a sysadmin, not a developer, so... ;)

@SebastianZartner Ай бұрын

Great overview of debugging features! It would have been great, though, if you at least mentioned that Firefox and Safari have similar DevTools, or even showed them.

@Neckhawker Ай бұрын

I never used the debugger. Using console.log/warn/error() is waaaay faster to quickly see where the issue is. If I have a loop that do hundreds of iterations, it is way faster to quickly read 100 of lines, instead of having to do each loop one by one with the debugger. Debugger can be good when learning how to code, to see what is happening at each lines... but else, console is just way more practical.

@Toopa88 Ай бұрын

It's not way faster. Also: Conditional breakpoints.

@Neckhawker Ай бұрын

@@Toopa88 It IS way faster. Yeah conditional breakpoints, ... how do you do a condition on a futur value ? How do you do a condition "stop at the beginning of the loop where the exception is raised", when you don't know when an exception would be raised...

@pauldudley1273 Ай бұрын

Not the video we asked for, but the video we needed

@ReviewSmartTech Ай бұрын

awesome... what took you so long to think about this idea? immensly helpful

@ashishkumarmishra9047 Ай бұрын

Thanks Man.!

@dunkTheFunk 16 күн бұрын

You are a gift to the world.

@njosuedev. Ай бұрын

awesome!!

@koderkev42 Ай бұрын

There is a reason the phrase "script kiddie" was a thing. These coding bootcamps are pumping out people who expect to go into an organization and use the latest tools, frameworks and languages ON GREENFIELD projects. Any developer/programmer who has real experience will know GreenField projects are rare and more often than not, you will be working on legacy code (ironically built with the latest and greatest tech of whatever time-period it was created in). Debugging skills are crucial to success. When we lowered the bar of entry, we let in hoards of people who did not have basic/traditional programming skills, and only knew what they read in a tutorial or watched in video. It's scary times out here. The problems such people create are the very ones I've had the fortune (and misfortune) of working on over the last 10+ years.

@DerHoasd Ай бұрын

+1. Got absolutely the same experience. Having jung people coming from the university. Never touched the Linux console and never ever heard about *vim.*

@deatho0ne587 Ай бұрын

Basic Debugger tips get a llinter/spell checker and learn to look at the code color differences & what they do in your IDE. Do not use console.log unless you are debugging. Issue with debugger is your code might not get there at all. Sometimes you just have to update DEV with logs and then make guesses, this is rare but can happen. Most DEVs just need Fetch in Network, unless you are working on UI work and even then it is where I stay 95% of the time when only doing UI. VSC debugger will not work in most frameworks so basically pointless. Like the uncaught, most of the time I know when I make them but still. Also think in larger projects I would never be able to get out of some of them.

@ChinaraIbr 15 күн бұрын

Thank you!

@Ninjaphil24 Ай бұрын

Wonderful!!

@CapsAdmin Ай бұрын

I enjoy using debuggers and I naturally always do so when using C#, C or C++ in an IDE where launching the program with the debugger enabled is the default. However when it comes to the browser debugger, I know it exists and I've sometimes used it, but the barrier to entry is often so high that I resort to console log instead..

@moazamshoaib8706 Ай бұрын

Everything is good. I would appreciate it if you could zoom out the camera a little bit.

@tomaselke3670 Ай бұрын

Your guitar precariously balanced on your guitar stand is giving me a brain aneurism.

@fake08 Ай бұрын

amazing video. thanks so much ♥

@WebDevSimplified Ай бұрын

Thank you for the support! I'm glad you liked the video.

@Thegeektoendallgeeks Ай бұрын

what would you say is the best way to debug in a web app on an ios device web browser without needing to buy 3rd party software or by having the correct MacOS for an ios device?

@wandreperes Ай бұрын

You speak very clearly! I can understand everything! Just curiosity... What state is your accent from?

@WebDevSimplified Ай бұрын

Nebraska

@wrlee Ай бұрын

Anonymous functions are unnamed, usually lambda, functions like the `timeout()` callback. The outermost anonymous is the internal caller to `main()`. (there's no particular tie between "anonymous" functions and "top-level"

@thirdreplicator Ай бұрын

It's been 6 months. The head bobbing is out of control now.

@fallensoldier-gettingUP Ай бұрын

Hi, thanks for the video but i have a question, what if the app is running completely fine without any problem but then i find it giving errors after deploying it?

@thembaravenibhanutej3388 Ай бұрын

Great greater greatest skilled developer ever🎉🎉

@aberbaCodes Ай бұрын

To be fair, console.log() or printf or whatever equivalent does the job in 80-90% of the case. It's why I never use the debugger unless I'm in real trouble

@TwinechoesEntertainment Ай бұрын

this is a frontend-dev specific take. For backend and complex native apps logging is King, the debugger is the one that's for 'simpler' bugs

@afterglow5285 Ай бұрын

All of this is fine and dandy, now do a video about the unholy mess that is react and how to debug a chain of useeffect and usewhatever, sudden memory leaks. Since i moved on from react i spend more time with friends and family, or in the vs code editing new code than banging my head in another all-night debug session.

@lakshaynz Ай бұрын

Thank you ❤

@NomadicBrian Ай бұрын

As the code base grows the debugger becomes more significant. If you join a project and have never seen the code then your really want to track where things are going. You may have to close 15 files when you are done but the bug you are fixing can happen anywhere in those 15 files and good luck not missing some files if you don't.

@__shubhamtiwari Ай бұрын

Gajab Kyle Cook bhaiya ❤

@VladyslavDihtiarenko Ай бұрын

Hello Kyle, thanks for the video! Could you please share your setup for audio/video recording? I'm impressed by the audio quality in your videos, considering you're in an empty room without acoustic panels. I started my own KZfaq channel, but I can't even reach a similar sound quality like in your videos... Lots of mic noise, room reverb and keyboard sounds

@DerHoasd Ай бұрын

I also make videos, but have never had any problems with background noise. Even without a special setup (e. g. acoustic panels). Maybe it's the microphone?! I use the RØDE NT-USB [kzfaq.info/get/bejne/pciAq7WG153Xd4k.html] which has an amazing good sound quality.

@thoropyt9955 Ай бұрын

thank you very much

@virendrakhilare878 Ай бұрын

Superb Video. Insightful. Can you please make a similar video on VS Code? It will be helpful to get a deeper knowledge of VS Code.

@munna5553 Ай бұрын

Can you please make video on full stack website without using any external authentication library please it help alot 🙏🙏🙏

@AlekVila Ай бұрын

Is there a way to break and catch exceptions on promises, especially with 3rd party scripts that swallow errors and serialize functions so they are illegible?

@studiosoftmorecambe6879 Ай бұрын

Running code often, as it is being written is the best way to spot errors. I have seen the expert coders bash out a few hundred lines of code in 10 minutes and then spend 2 days fixing all the errors.

@abcdabcd8605 Ай бұрын

Very useful video

@PlaymeoffSia Ай бұрын

good video man

@AlekVila Ай бұрын

I wonder how Watch works if you have multiple variables in your code with the same name, scoped differently. Does it show them all?

@eriscrypt Ай бұрын

Hi ! Do u use vs code in your work environment ?

@YnMillion Ай бұрын

Hey Kyle; please do a tutorial on how to style your hair

@DerHoasd Ай бұрын

😂😂😂😂😂😂😂

@Eduardo-eb7ej Ай бұрын

Thank you

@aurelian3401 Ай бұрын

Hello folks, does anyone knows how it works TypeScript in web browser, since it understand only JavaScript. Can you explain the flow, compilation and programs which make it usable?