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

Francesco Battaglini
Guest
Francesco Battaglini
6 months 17 days ago

Awesome series, keep it up!

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

Thanks 🙂

AmxCsifier
Guest
AmxCsifier
6 months 17 days ago

I sometimes use the debugger statement to set a breakpoint 🤣

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

It's all good, me too.

Alex Naanou
Guest
Alex Naanou
6 months 17 days ago
A great example of both the advantage and disadvantage of using a debugger…Advantage:- it helps one locate where something breaks quite fast…Disadvantage:- it is so fast that it's very easy to skip over the root of why something broke…In the video, the surface error is the concatenation of two strings where the addition of two numbers is expected… but the actual problem is not addition vs. concatenation but rather a bit deeper, in the way the values are accessed, you call getNumberX(..) and get a string rather than a number, and in this particular case fixing the root problem will… Read more »
Martin Pultz
Guest
Martin Pultz
6 months 17 days ago

Awesome! Debugging tips always welcome. I'm trying to break out of my console.log habit to solve issues

Martin Pultz
Guest
Martin Pultz
6 months 17 days ago

It's a great idea for a video since you're very right there is a lot in DevTools I (and likely others) have no idea exist, and the same goes for other debugging tools like that found in VSCode. Cheers!

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

console.log() is a totally acceptable solution. My goal with this video is to just show what's possible in DevTools. A lot of people don't know this workflow exists! If you try both and prefer the console.log() method, it's all good! Use whatever workflow helps you debug your issues fastest.

Amruta Akut
Guest
Amruta Akut
6 months 17 days ago

How do we debug JS written inside HTML files ?

Amruta Akut
Guest
Amruta Akut
6 months 17 days ago

I see, I am using a template HTML file which has the <script> tag and I am unable to find it in the Sources panel

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

That's correct, you can indeed put breakpoints in it from the Sources panel. One limitation, though, is that you can't edit HTML files like you can JS files, like I do in the video around the 6:30 mark.

Lordious
Guest
Lordious
6 months 17 days ago

Look in the sources panel for that html, You should be able to put breakpoints in it.

Romain Lemichez
Guest
Romain Lemichez
6 months 17 days ago

Why does the function name is "getNumber" while it returns a string, the parseInt should be in that function! 🙃

Kayce Basques
Guest
Kayce Basques
6 months 15 days ago

Good point, in a real app you are totally correct. With this tutorial I was more focused on demonstrating DevTools, and not thinking about how to correctly author the code. But I'll definitely keep it in mind for next time 🙂

spilot14
Guest
spilot14
6 months 16 days ago

Easier to give you a clear bug.

Scamor
Guest
Scamor
6 months 16 days ago

I'd guess it was made that way just so it would be easier to examplify the issue and the solution, since it would all be inside one block of code, but your sollution would be the correct one.

Yogesh Lakhotia
Guest
Yogesh Lakhotia
6 months 17 days ago

Better example was expected. Anyways great video explaining dev tools.

Kayce Basques
Guest
Kayce Basques
6 months 15 days ago

Thanks. Regarding the example, I wanted to keep it relatively simple so that people who have never used DevTools to debug could follow along. This video is really just the foundations of debugging. I didn't want to intimidate people with a complex app, on top of the complex DevTools UI. But I'm happy to listen to your feedback on what would've made the app better.

TVXtrem
Guest
TVXtrem
6 months 17 days ago

This guy looks just like Ben Affleck!

Martin Freire
Guest
Martin Freire
6 months 17 days ago

Excelent video!!

Martin Freire
Guest
Martin Freire
6 months 17 days ago

Kayce Basques I'll really use this. But please, next do a video debugging a transpiled file with a map, like Angular. It will be really usefull to avoid the console.log nightmare!!!Thanks!!

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

Thank you 👍

Sky channel
Guest
Sky channel
6 months 17 days ago

hi

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

Thank you for calling this to my attention. We have fired the set design person who was responsible for this grievous error.

Severin Friede
Guest
Severin Friede
6 months 17 days ago

Nice video but please sort the screwdrivers properly by length

Kayce Basques
Guest
Kayce Basques
6 months 17 days ago

hi

wpDiscuz