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: https://goo.gl/MwytjG
Doc version of this tutorial: https://goo.gl/NZxQdD
Breakpoints Guide: https://goo.gl/9XYhhF
JavaScript Debugging Reference: https://goo.gl/osaf2Q
Subscribe to the Google Chrome Developers channel: http://goo.gl/LLLNvf
Original source
46 responses to “Debugging JavaScript – Chrome DevTools 101”
event listener breakpoint 2:22
Sorry for hijacking this post with this comment. I am hoping to hear more about how to use the Javascript debugger, because chrome, at least my copy of it is quite buggy. I keep getting pop-up ads. Please note, I have uninstalled it, reinstalled it. I have run the chrome malware detector. Only to find out there is no malware present. It is frustrating. You may be wondering why I still use chrome if I keep receiving pop-ups. Or you may be thinking, why I have not set (in Chrome's settings) to block the pop-ups. The answer is I have. Neither setting blocks them. My current solution is to copy and paste the web address of the pop-up. This is not even a temporary solution, because I still see pop-ups. If I run a search, open a new window, or open a new tab in chrome, there is a decent chance this results in a pop-up. What events would you have me look at to see why I am seeing pop-ups? Hopefully, the thoroughness of this message works for you.
Chris Patt is an amazing developer as well!
Less than 2 minutes in and I have already learned something new. Thanks!
Chris Pratt, Derek Theler and now this guy. I bet they are all the same person!
not working. when i mouse click it is opening a file like VS25 and line are executing one by one in that file. Nothing is executing on get-startes.js file like showing moving from one line to another line
Anyhelp?
great video bro, it really helped me…and as for the star lord reference, nahhhhh he looks more like Ant Man (Paul Rudd)
cool
Shirt's on point. Glad to finally see a little bit of fashion coming into the development world. Seriously.
Thanks to this video I was able to fix a problem I was trying debug for hours. Thank you so much!
Can u do a video related to changing CSS in chrome??
This is so powerful. I never knew this to be so cool and awesome. I want more…
I love this tutorial! Thank you
Thanks
fantastic outfit coordination. very nice hair, too. 10 out of 10 from me. bravo.
my dev tool keeps showing automatically, how do u stop it?
would "addend1" var be available in console if you hadn't opened source panel?
No entiendo… ¿Este tipo trabaja en la ferretería de Google y además le gusta lo vintage?
Nice. I'll never need console.log again!!!! Muahaw haw haw haw
How do I get to my source code when using webpackconfig? I see only bundle.js in devtools sources.
Great GuY..!! Awesome video 🙂
why wouldnt you be using your source code to do this? its a clever tool but cant see why use it?
i want to find code for e.g. typewriter css/ js effect ive seen on a site and use it on my site ( yes i could look online for the code but thought this might be quicker…2 days later..it not this time lol,) …. can you use tools for this/?
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.
My Dev Tools won't even open. How can I fix this?
Kayce is cute
video starts at 4:46
YOU'RE TOO CUTE. I'm being distracted and can't really focus.
thanks for teaching me a better way, funky shirt man.
Liked your video. Good Resolution. Great Clothes.
wheR IS THE LINKS?
@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*.
that's a great jacket
I didn't know Star Lord was a developer
Simple, clear and informative. Thanks
AWESOME video. A coworker and I wanted a deeper understanding of how to use Chrome DevTools, and you've delivered it! Thanks!
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
THINKS A LOT BRO FROM TUNISIA
I failed to get a pause on the line for the update label even though I placed a break there 🙁 Even stepping through just seemed to skip that section!)
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;)
How can I download developer loops f12? Please tell me
This is so dope! Ty!
When can devtools dynamicly change non .js files, ie inline javascript in the html file
If I'm using sourcemap, how do I set devtools to open the right module?
is it the same question as @Dimitar Nestorov?
I'm using React and bundling it with webpack, so, bringing me into the bundle file isn't very efficient
what if your on a chromebook
i'm ashamed to say i've been using console.log for far too long now. it's time to change
2:32 lol who says "button" like this?