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

66 Comments on "Chrome DevTools 101: Debugging JavaScript"

Notify of
avatar

Natalie Harrington
Guest
Natalie Harrington
1 month 1 day ago

I love You!

Ciprian Cucuruz
Guest
Ciprian Cucuruz
1 month 2 days ago

Very useful tutorial!

Neo Skribe
Guest
Neo Skribe
1 month 5 days ago

Pretty nifty shirt there.

Rahul Bhadhoriya
Guest
Rahul Bhadhoriya
1 month 6 days ago

hits the bull's eye!! thanks

Peter Cruckshank
Guest
Peter Cruckshank
1 month 7 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
1 month 6 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
1 month 8 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
1 month 6 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
1 month 10 days ago

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

Kayce Basques
Guest
Kayce Basques
1 month 10 days ago

Thank you, Shady!

Andrei Ionita
Guest
Andrei Ionita
1 month 10 days ago

Good luck doing this on a hardcore React-Redux app

Andrei Ionita
Guest
Andrei Ionita
1 month 10 days ago

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

Kayce Basques
Guest
Kayce Basques
1 month 10 days ago

The React DevTools help, no?

minj4ever
Guest
minj4ever
1 month 10 days ago

parseInt(n, 10)

Kayce Basques
Guest
Kayce Basques
1 month 10 days ago

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

spilot14
Guest
spilot14
1 month 11 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
1 month 10 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.

1 2 3 4
wpDiscuz