The Most Important Skill You Never Learned

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:

🌎 Find Me Here:

⏱️ 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

[Տ·̇]

How many people are here only use console log for debugging

[john_doe_]

Please make more of these debugging videos, really helpful stuff

[shantanukudva]

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

[suchitsheth]

One more debugging point if you want to be bit lazy

Not lazy version:
console.log("value", value)
Lazy version:
console.log({value})

[bm]

I've been working as a front-end dev for 10 years now, and still find your uploads helpful, thank you! Maybe one thing I would like to add, that I use a lot, is stopping at a breakpoint, and pointing my cursor on variables, to find out the value of the variable at that state.

[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.

[markmaples]

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).

[jomamaful]

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.

[YT-drqi]

Debugging in VS Code also works for TypeScript. It may require simple configuring of a compiler, but as I remember, by default it's already configured properly. The goal of configuration is to tell the compiler to create a mapper file which maps a place in the compiled non-readable JS code to a corresponding place in the source TypeScript code. Everything else does the VS Code and browser. The browser's debugger via a special API sends to VS code the current position and other information and VS Code debugger uses the mapping file to translate this position to the actual position in the source code. Also this mapping file is used to deobfuscate the variable names. The technology may seem complicated but it all works under the hood, transparent to the programmer so you don't have to think about it. And identical approach is used for back-end debugging for decades, so the technology is well tested and it works excellent

[jzvjien]

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!!!

[jordanhildebrandt]

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

[jcl]

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.

[mastle]

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

[wandreperes]

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

[MrNihilius]

you are a natural born teacher - many thanks!

[getprompted]

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

[DerHoasd]

Downloaded this *amazing masterpiece* and placed it in the middle of my desktop.

[rakarakic]

Big respect to this chanel, content and creator 🙏

[heathenmonk]

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

[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