Debugging JavaScript - Chrome DevTools 101

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

[@Ch4nster]

I didn't know Star Lord was a developer

[@balazsio]

It's not Star Lord it's Antman

[@HamuelTheGrey]

It's Blake Shelton!

[@ifeanyinkwoji2717]

A more handsome Star Lord.

[@Moist_yet_Crispy]

ayyyyyy!

[@TheEricapiano]

dont know who that is but this guy is hot LOL

[@geekyprogrammer4831]

Chris Patt is an amazing developer as well!

[@ValchyGaming]

what is he doing here? does he code?

[@solushex]

Half Chris Pratt, half Paul Rudd.

[@deezyfreezyy]

@@solushex seriously!!! I see it!

[@acidset]

He's really cute

[@nateizu315]

@@solushex holy Sh*t I was literally thinking the same thing. Those two specific actors haha

[@briannistor6766]

Just started learning javascript and someone sent me a link to this vid to improve my workflow, very helpful!

[@echiang73]

Awesome tutorial, very helpful in learning to use the DevTools. Technically for best coding practice, the solution of the problem is to insert parseInt() in lines 35 and 38 when executing the function for getNumber1() and getNumber2(), since that's the methods that we expect to return numbers instead of strings. That way, if you do choose to perform other calculations within the app, you don't need to parseInt() other subsequent mathematical functions. function getNumber1() { return parseInt(inputs[0].value); } function getNumber2() { return parseInt(inputs[1].value); }

[@kabirnangrale5453]

See XD q

[@shymultimedia]

AWESOME video. A coworker and I wanted a deeper understanding of how to use Chrome DevTools, and you've delivered it! Thanks!

[@amithbhagat]

Good video. Covered enough basics of debugging in just 7 mins and Demo offers a nice example to try it out quickly.

[@pendlesoftware4230]

If only I'd known about this months ago when i started learning Javascript, it would have saved me so much time debugging, cheers mate. (like the radio cassette by the way, I had one just like that 40 years ago!!)

[@keith224]

I can't thank you enough for the simple step by step instructions with examples. You made it easy enough for a 'noob' to get through it and you gave me what I needed/wanted. Thanks

[@AlexNaanou]

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 eliminate a whole class of potential errors while the solution given in the vid will "mask" the error and lead to code bloat. To reiterate, the debugger helps one locate the breakage, and maybe patch a particular case (wrong operation type in the vid) but it does not replace the skill to find/see the actual root of the breakage, the actual bug (here "getNumber*(..) -> String" name/return mismatch) and fix it.

[@quentinmckay8658]

well said. i have nodded in agreement :-)

[@E_y_a_l]

Alex Naanou I disagree with you, at least when speaking about this specific example here, using a slower debug procedure like console.log wouldn't have made his solution any different, he would have still come to the same conclusion and still change the same line of code, the cause of the problem is that the value he's getting is a string, he understand that and eventually he would have understand that in both debug procedures, he also knows in both procedures that he gets the value from the functions of getNumber(x), what's different? he chose to ignore this knowledge in this video(probably just to simplify things) and I don't see a reason why he wouldn't have chose to ignore it if he would have used console.log.

[@AlexNaanou]

@Christopher Huber I agree with the setup part, but would argue against the rest -- when in a public context you have to consider both the educational and informational aspects of a video, if we ignore the first you are 100% correct, if we don't, then this video is also a figure of authority (Google) showing a correct way to use "the new feature in a tool" or is it "the tool and its new feature"? ...the two are quite different and I hope you can guess how a person who has little or no experience with the tool would read this =)

[@AlexNaanou]

@ReillyArr-vc1rmI like how you put it, the expression can be understood it at least three quite distinct and almost opposed ways! =) Which developer do you mean? ...the one using the debugger in the vid and missing the source of the error, the one to whom the debugger is a "disadvantage" (excuse the pun), or the one learning from this video? =)

[@hstrinzel]

Brilliant! I should have viewed this YEARS AGO! THANK YOU!

[@ashleymckellar8703]

Thank you for this! I've just started learning JS and this was immensely helpful.

[@biglloydwilson7765]

Hey

[@janborup]

Thanks - Could very much have used this video many years ago, so very great for newbie debuggers.

[@idhamhafidz]

This is so powerful. I never knew this to be so cool and awesome. I want more...

[@billwindsor4224]

@Kayce - Excellent job on this. Your content, pacing, and your positive “you can solve this with more powerful tools!” approach all make for informative and encouraging teaching - *thanks*.

[@benedictpayot]

Great explanation! All this time I was living under a rock trying to debug manually lol, thank you!

[@rburtoff]

This 7:27 video just saved me 5,000 + hours of hair pulling, primal scream therapy, and general rage and frustration. Thank you GCD!!!!!!

[@Netryon]

Right or wrong, but it just proves everything is considered as a string, makes it easier to understand. Same development or debugging approach is used for hardware - which is a general rule where to begin, but it's little too hard to get familiar with it is an Arduino.

[@Alquerian]

Less than 2 minutes in and I have already learned something new. Thanks!

[@arifulhaquebhuiyan]

Hope will start to use DevTools > Sources from today. But need a deep drive to learn more. Thanks for the intro.

[@petecapecod]

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

[@zimpricecheck]

This helped me get rid of an annoying breakpoint that somehow made it's way into all my Vue projects.

[@himynameiswyatt]

Why does it pause me on line 15 --- if (inputsAreEmpty()) { --- instead of line 14 --- function onClick() { --- every time, REGARDLESS of whether I'm in incognito mode or not? Am I missing something, or is "if you're paused on a different line of code, press Resume Script Execution until you're paused on the correct line" missing a crucial second step?

[@jasminepvodevtech]

Same here.

[@MartinPultz]

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

[@MartinPultz]

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!

[@internetphenomenon734]

Shirt's on point. Glad to finally see a little bit of fashion coming into the development world. Seriously.

[@benjaminjacome]

Am I the only one here who didn't understand anything? I mean, I understood, but my click - event listener stops at if(inputsAreEmpty()) function and never in any other line,

[@albertt755]

me!

[@asdsadasddadweqwe]

same, terrible video

[@ronaldcabrera675]

I'm using an incognito window and following the instructions but it is jumping to different lines than on the video. Firstly, it is stopping on line 15, not 14 like in the video. I tried turning off the mouse click even listener and selecting line 14 manually and it won't allow me to, it selects line 15 instead. And this occurred for the other lines selected in the video as well.

[@kurdm1482]

because of how JS works, the function identifiers are skipped, the actual expression matters

[@trailblazer_nomad]

Thanks to this video I was able to fix a problem I was trying debug for hours. Thank you so much!

[@TheBiczyss]

I have the same problem as the others below, click listener points me to line 14 instead of 15, I tried to do it but nothing helps (incognito mode, different browser, etc.). Anyway, it doesn't bother you because later instructions are key. A useful guide for me as a beginner, thank you

[@icecut7403]

This is enough for development I think Remaining things you can learn by your own and that's best practice

[@StephanOnisick]

Liked your video. Good Resolution. Great Clothes.

[@bhavyaramaiah5249]

Your videos are great, but I have a request, please increase the video quality a bit or zoom in a little, most times the text is blurry. Also the video doesn't have an option to increase the quality from my end.

[@Etcher]

Love getting debugging advice from Chris Pratt :)

[@svenelven138]

The example web page now stops on line 15 evaluates at inputsAreEmpty and finishes up at line 20

[@codesoteam8608]

This dude knows it all. You will be my teacher

[@nikhileshpandey5653]

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

[@davidrichardson1533]

It's difficult to follow the script when what I see on my browser doesn't match what's in the video. I do wish that the debugging tools team would sort out whats going on as the platform changes or how to make things match the video, E.g. the [Sources ] link isn't visible until the [debugging] link is opened. It's the little things that throw off people and create confusion in your audience.

[@gilbertsenyonjo963]

Eh, thanks alot man. You've exposed things I've never even heard of or thought possible

[@Richienb]

Though manually parsing the strings is effective, a better way is to use the .valueAsNumber property instead of .value.

[@charles-y2z6c]

Nice tools, I will use them. These are tools that have been available in visual studio for a long time. They replaced printf() debugging

[@porobertdev]

Here from The Odin Project. Good luck everyone! :)

[@jameshillman1604]

I was just happy that I knew the problem before going through the debugger...Whoop Whoop im learning

[@EricMillen]

Zooming in and describing which buttons are being push where and when would have been very helpful, especially since google frequently changes the layout in subtle ways.

[@maxvogel2018]

It was an absolute joy to watch this! Thank you

[@pixelPlex]

Important to note that Chrome DevTools can also debug code written in a different programming language (eg Kotlin - kotlinlang.org/docs/tutorials/javascript/debugging-javascript/debugging-javascript.html ), provided source maps are supplied ( kotlinlang.org/assets/images/tutorials/javascript/debugging-javascript/chrome-devtools.png ).

[@pretor89]

2:56 I tried this in incognito and still paused at 'if (inputsAreEmpty()) {' Then i tried this on firefox (on which i have no extensions) and i get the same result??

[@adbaditya]

Having the same issue, I tried multiple browsers. It's literally driving me crazy.

[@joshhaddock88]

Same. I feel like I'm taking crazy pills.

[@FrancescoBattaglini]

Awesome series, keep it up!

[@CompTutts]

The event listener breakpoint was probably the worst one to show off since most of us use some type of framework which wraps event listeners and until you get to your code you would've console.logged the whole app 😁

[@CompTutts]

That's gonna be a tough one, you'll have to handle frameworks when added from CDNs, when being bundled, AMD, CommonJS... That starts to sound like a dream to have that feature. I advise everyone to start adding debugger statements instead of console.logs everywhere they would've added them, and they would most probably don't feel the need for event listener breakpoints. Also that way when doing cross browser testing of a certain feature you'll always break on the debugger and not whatever the DevTools of browser X gets you to (not to mention just finding their placement in the UI). People still use IE after all 😥

[@CompTutts]

This looks awesome, I will be trying it out. You might as well do a short video bringing some awareness to other web devs about this feature.

[@varunsharma1889]

@Kayce - Great. I tested with jQuery and it is working. For AngularJS ng-click directive, it stops one level above in a script with yellow background. From there we can step into the correct function.

[@nielskersic328]

They fixed it with Chrome 66. developers.google.com/web/updates/2018/02/devtools#tip

[@Kaitter4]

after check the "click" box and click again in the "Add Number 1..." button, the Dev Tools open another page like "main.js......" not scope in "function onClick()" like min 2:34

[@eloquent2200]

Thank you for step by step explanation!

[@blueapple9135]

Thanks so much, you are the best. Finally i learnt something new today.

[@LaLa-sr3sr]

Anyone know why it pauses on line 15 for me but line 14 for him? at 2:42

[@andrescastillo2863]

I love this tutorial! Thank you

[@ladybug155]

@5:20 scope > local/global values currently defined

[@rickmemmer5625]

EXCEPTIONAL! Just what I needed to get me going on debugging! :o) Thanks a bunch!!

[@taylorfullstack]

So what if you land on line 15 instead of line 14, even when in incognito mode, and even when you have disbaled and deleted all of your Chrome extensions? The debugger worked fine except for this first part, and a simple Google search told me I am not the first person to have this issue or to be concerned about this. It persists in both standard Chrome and Chrome Dev browsers. Please respond @ChromeDevs

[@mycloudvip]

Question: Does console.log usage affect the performance of a production web app if the app is logging several variables and events constantly at runtime? Thanks and Great channel!

[@EnzOrtiz]

even in incognito mode i cant get the breakpoint to pause on the correct line. I followed the directions exactly

[@gadoosher]

This dude is mad steezy. Dank vid.

[@domeniqiknash3193]

so im trying to follow along and im at 3:05 in the video and im practicing this in a regular window and in an incognito window but both are going to the "if" statment after the onClick variable is there any thing that im doing wrong or need to different on my MAC

[@KaiLikesPieDuh]

having the same issue, tested on two different computers, windows and mac both in incognito mode and regular browsing mode, any tips on fixing this?

[@brunovincent1969]

On the first screen you forgot one needs to click on "Network" tab, my Chrome started on Filesystem tab, so didn't look the same, small detail, but important;)

[@lolheytherejimmy]

this needs to be updated, it doesn't work like this anymore

[@Patrick.Sanchez]

It doesn't work with minified code with source maps. All the variables in the list of Local are minified.

[@LanguageSkillz]

The example doesn't include the get-started.js in the Sources file options. Only the html page with the script reference comes up. Applying to another file. Traversy likely delves into some of the features across the board too.

[@Tassaczek]

Probably I should watch this video before 20h of debugging :D

[@phuongdao6046]

Great. But it's pretty annoying to debug when using library, especially with frameworks. It would jump to a lot of library code

[@khatmanworld]

any tip on how to deal with situations like that?

[@WaylandJohns]

​@@khatmanworld 2:40

[@inponderland]

thanks for teaching me a better way, funky shirt man.

[@raghunadh_g]

Kinda misleading for the beginner to understand, considering the example you took! Played it smart by allowing the user to give inputs making the debugger stop for click event listener which inturn allowed me to enter input. I was trying to give the inputs by inserting breakpoint before the readInputs function and the dev tool doesn't allow me to, says: "paused in the debugger". If this is how it should work then it's fine. Since the usage is sometimes not obvious and as all of us are impatient 😂 I think that's the reason why beginners go for console.log instead of debugging.

[@merthaddad1512]

Good one, I like the background 👨‍💻

[@cengiz-ilhan]

how can i disable an spesicif JS file. ( i wanna it work but i dont wanna see warning or debug) ?

[@Cloud-577]

thank you for the wonderful tips and tricks

[@insufficientrussophobia]

His jacket is so lit, I want it!

[@SirXtC]

when I click on the button, it takes me to a "grammar check" with a file with over 5000 lines of code, how can I take that option off? because that has happened before to me when I was trying to use the debugger but it usually takes me to these long "VM" files.

[@عبدالقادرعبدالرحمنعبدالله]

It really helped me @ the right time. Thank U so much.

[@paulthompson3156]

Wow. I never knew. Very useful ! Thank you.

[@EitanPeles]

I never knew that Chris Pratt could code. Cool!

[@eryksowinski2347]

I feel like I am 10 levels up in web developing in 10 mins :D thanks

[@ipwnublind]

When I first click on the Add Number button, the blue line takes me to line 25: if(event.button ==2) of the subscriptionLink.postload.js and not the get-started.js. Can you please explain this?? This makes this video useless for me.

[@sebap_xc]

Thanks, I wonder how to do so when working with a library like react, vue.. is it possible to only go through the code you write?

[@miguelbelo3009]

Why do I go into the content.js file when I set my Event Listener Breakpoint as demonstrated on the video? I'm really lost in why my break is not working as in the video... Can someone give me some light?

[@mrjosephDJ]

What if I want to debug onLoad. If I make changes to the js file in chrome and reload the page I will loose my changes

[@MZ-uv3sr]

Kayce Basques - author. I was wondering and found it on the article

[@vikashvikram]

The video is awesome but I just wish my real life projects were this simple. Moreover, the real challenge arises when we have to deal with a web of callbacks and promises. Despite all the features, it seems I almost always have to fallback to console.log ☹️

[@FranklinWaller]

Exactly this, alot of bugs come from timing issues or wrong handeling of promises, when break pointing you may create bugs that only appear in the debugger, or the bugs doesnt occur in the debugger. So for me console.log is also still the best option

[@chandlerzhu9735]

In my event handler there is another function being called, to find the definition of this function I have to scroll up and down, is there a better way ?

[@nicholascocks4770]

Around 4:40 he says "I can tell the bug is probably in the updateLabel function"; how did he know that?

[@pictureus]

He put a breakpoint on click. The onClick method only called updateLabel() and that was the end of it.. sure the bug could be in the getNumber1 and 2 since it's supposed to be a number and not "getInput1" but within that call-scope. Hope it helps someone :)

[@akinhwan]

would "addend1" var be available in console if you hadn't opened source panel?

[@johnoribimabatamsblog]

I'm a new web-developer, I was given a task to check errors and bugs in a website page

[@tramarthomas6105]

I thought before that the line breakpoint was for highlighting lines, lol. thank you.

[@injin8529]

Thanks Chris Pratt!!!

[@thundergabriel]

how to inspect dropdown element in chrome ??. You really test yours apps ?

[@shubhrajit2117]

In Firefox you can add certain js files and folders in ignore list while debugging. This feature doesn't work properly in Chrome :(

[@Nobel0]

Hello, thanks for the video. Question: Can i debug an error with a payment processor in the site? OR this is cannot be done? Thanks

[@sean123123100]

Awesome video, thanks!

[@pranoydas9654]

How did you open console? What is the short cut key ?

[@Vladhin]

Awesome, thanks! That's pretty helpful

[@Mauryarohit1]

In angular, we have ts files but event listener breakpoints goes to the javascript file. Is there any way to point to ts file?

[@mrblack314011]

I tried the event listener in an incognito window and it still pauses on the wrong line of code. Any suggestions?

[@askur00]

Great host, keep up the good work!

[@cipnt]

Very useful tutorial!

[@kjy112]

This is so dope! Ty!

[@modshehata]

You're awesome, things for the tut :).