Published on January 5, 2018 by Chrome

If you’re still using console.log() to find and fix JavaScript issues, you might be spending more time debugging than you need to. This tutorial shows you how to make the most of Chrome DevTools so that you can debug your JavaScript as quickly as possible.

Demo: goo.gl/MwytjG
Doc version of this tutorial: goo.gl/NZxQdD
Breakpoints Guide: goo.gl/9XYhhF
JavaScript Debugging Reference: goo.gl/osaf2Q

Subscribe to the Google Chrome Developers channel: goo.gl/LLLNvf

Leave a Reply

77 Comments on "Chrome DevTools 101: Debugging JavaScript"

Notify of
avatar

Neo Skribe
Guest
Neo Skribe
6 months 10 days ago

Pretty nifty shirt there.

Rahul Bhadhoriya
Guest
Rahul Bhadhoriya
6 months 11 days ago

hits the bull's eye!! thanks

Peter Cruckshank
Guest
Peter Cruckshank
6 months 12 days ago

First off, your beard is coming in really nice bro 👍😁 Looking good. Also thanks this was a great video to watch and run through some of the JavaScript debugging tools. It's always nice to have examples to follow along with, and to learn more about Chrome

Kayce Basques
Guest
Kayce Basques
6 months 10 days ago

Thanks! I recently trimmed it back down, which I now think was a mistakeHappy to hear that the video was helpful

Nikhilesh Pandey
Guest
Nikhilesh Pandey
6 months 13 days ago

Learnt some pretty good debugging lessons, specially the breakpoints and watch tool are something which will come pretty handy. thanks for the Knowledge Transfer. 🙂

Kayce Basques
Guest
Kayce Basques
6 months 10 days ago

Knowledge transfer is what Google pays me to do! Happy to hear that you learned about some new useful tools

Shady AbdEl-Hamid
Guest
Shady AbdEl-Hamid
6 months 15 days ago

I didn't know chrome devtools can do all that oO. awesome walkthrough. keep it up, Kayce.

Kayce Basques
Guest
Kayce Basques
6 months 15 days ago

Thank you, Shady!

Andrei Ionita
Guest
Andrei Ionita
6 months 15 days ago

Good luck doing this on a hardcore React-Redux app

Andrei Ionita
Guest
Andrei Ionita
6 months 15 days ago

Kayce Basques We made an error handling system for the whole app.

Kayce Basques
Guest
Kayce Basques
6 months 15 days ago

The React DevTools help, no?

minj4ever
Guest
minj4ever
6 months 15 days ago

parseInt(n, 10)

Kayce Basques
Guest
Kayce Basques
6 months 15 days ago

Yes, thank you for the tip! The second arg specifies to use base 10.

spilot14
Guest
spilot14
6 months 16 days ago

Holy shit I had a phobia of DevTools cause I never knew how it worked and diving into it appeared cumbersome. You've really gave me push-start to tinker with it. Thanks.I see many comments about the code quality or wanting 'better' example – false, all these comments are missing the point. This was the PERFECT example to nail down using DevTools for the first time to stop 'sprinkling' console.log() all over the code. Looking forward to more videos.

Kayce Basques
Guest
Kayce Basques
6 months 15 days ago

Awesome, this was exactly what I was going for. My main goal was to provide a friendly introduction to debugging in DevTools. I'm happy that you found it useful.

Muslu Yüksektepe
Guest
Muslu Yüksektepe
6 months 16 days ago

Attım hafızaya

Aniruddha Das
Guest
Aniruddha Das
6 months 16 days ago

amazing 🙂

wpDiscuz