Chrome Debugger is BETTER than you might think

Everyone uses console.log all the time, but if you want to look smarter 🧠 when doing pair programming or sharing your screen, here’s a Chrome’s debugger video. Thank me later 😉
Jokes aside, unless you really just need to peek at one value, using the debugger gives you much more context and awareness while debugging your application… and you won’t end up having 7 logs here and there flooding the console.
With Chrome you don’t even need to setup anything. It just works, and you get for free features like conditional breakpoints, watching values, and if you really like logs… you have logpoints!
_______________________________
Hit like and subscribe for more content! :D
Join the Discord community! Here's the invite: / discord
You can also follow me on the other platforms:
Twitter: / balastrong
dev.to: dev.to/balastrong
Home: leonardomontini.dev/
TikTok: / balastrong
GitHub: github.com/Balastrong
Instagram: / devbalastrong
_______________________________
Sound effects from www.zapsplat.com
#debugging #devtools #javascript

[@moihugo7018]

Super helpful, why did I not know about this features until then !! Thanks a lot, that will clearly change the way I write js and ts !

[@DevLeonardo]

Great to hear you liked it! Good news, you can also use vscode to debug your application, I'll probably make a video about it soon :)

[@wilfy89]

Very nice video, I feel like there's no real consensus on how to debug other than console log etc and also not many videos that cover it online. I learned a lot 😃

[@videoforref845]

This is such a useful video. Thank you i am new to front end and react. debugging is essential and how to do it efficiently is something that should be learned first. Glad the yt algo suggested this video.

[@DevLeonardo]

Thank you for the kind words! Also thanks to everyone subscribing and leaving a like on the video, this makes the algo to suggest it to a wider audience :D
Love to hear my content is helpful!

[@stefanocons]

Great video Leonardo! Thanks a lot!

[@djdankmemes9257]

Extremely useful video. Thank you for making this!

[@DevLeonardo]

Thanks, glad to hear that! :D

[@JuanMoisesTorrijos]

Great video. This will save me a lot of time!

[@DevLeonardo]

Thanks! You're gonna love the debugger :D

[@rayjazon]

Very well organized and works equally well on VSCode!

[@DevLeonardo]

Yes! Thanks for the comment :D

[@farzadmf]

Great video
One thing that I'd add is "never say never" 😉; using `debugger;` could be useful in a couple of use cases: you're not familiar with the code, so you don't know exactly where to put the breakpoint. Or, you have no idea why a line is being executed, so putting `debugger;` in there would definitely help

[@DevLeonardo]

Thanks! That's true, in those two situations it can be quite useful :D

[@user-qb9mo8xb3q]

Super helpful, thank you!

[@DevLeonardo]

Will you use the debugger now? :D

[@user-qb9mo8xb3q]

@@DevLeonardo Yes absolutely!

[@po5540]

Very useful video, thanks

[@DevLeonardo]

Thank you, feel free to have a look at the other videos in my channel :D

[@UXDlozi]

very helpful. thank you

[@DevLeonardo]

Happy debugging!

[@ellsonmendesYT]

if ur in dev tools ctrl + p goes to find file, else it goes to print

[@DevLeonardo]

Ah, right!

[@joshuakawamata5406]

wwhat if your app is bundled

[@DevLeonardo]

If it has sourcemaps should work anyway (vite bundles your app) or if you want a completely different plan, you can debug directly in vscode: th-cam.com/video/FOXNlZFkbPk/w-d-xo.html