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: 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”

  1. 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.

  2. 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?

  3. 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/?

  4. 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.

  5. @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*.

  6. 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

Leave a Reply