• Wednesday , 22 May 2019

Debugging JavaScript – Chrome DevTools 101

Code Canyon



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

3d Ocean

Related Posts

46 Comments

  1. Beto
    April 17, 2019 at 04:56

    event listener breakpoint 2:22

  2. Carlos Perez
    April 17, 2019 at 04:56

    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.

  3. Geeky Programmer
    April 17, 2019 at 04:56

    Chris Patt is an amazing developer as well!

  4. Alquerian
    April 17, 2019 at 04:56

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

  5. PurpleV2
    April 17, 2019 at 04:56

    Chris Pratt, Derek Theler and now this guy. I bet they are all the same person!

  6. Bhargava Ramudu
    April 17, 2019 at 04:56

    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?

  7. Creus Sosa
    April 17, 2019 at 04:56

    great video bro, it really helped me…and as for the star lord reference, nahhhhh he looks more like Ant Man (Paul Rudd)

  8. Kumar Prosenjit
    April 17, 2019 at 04:56

    cool

  9. Caleb Miller
    April 17, 2019 at 04:56

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

  10. Jędrek Domański
    April 17, 2019 at 04:56

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

  11. Jaykrishna Natarajan
    April 17, 2019 at 04:56

    Can u do a video related to changing CSS in chrome??

  12. Apit John Ismail
    April 17, 2019 at 04:56

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

  13. Andres Castillo
    April 17, 2019 at 04:56

    I love this tutorial! Thank you

  14. Jean-Marc Vilarroya
    April 17, 2019 at 04:56

    Thanks

  15. Ryan Leckie
    April 17, 2019 at 04:56

    fantastic outfit coordination. very nice hair, too. 10 out of 10 from me. bravo.

  16. Hannah Zacarias
    April 17, 2019 at 04:56

    my dev tool keeps showing automatically, how do u stop it?

  17. Andrew Kim
    April 17, 2019 at 04:56

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

  18. The Big Bang Videos
    April 17, 2019 at 04:56

    No entiendo… ¿Este tipo trabaja en la ferretería de Google y además le gusta lo vintage?

  19. Phil Devry
    April 17, 2019 at 04:56

    Nice. I'll never need console.log again!!!! Muahaw haw haw haw

  20. Christy Welsh
    April 17, 2019 at 04:56

    How do I get to my source code when using webpackconfig? I see only bundle.js in devtools sources.

  21. Titus Kurian
    April 17, 2019 at 04:56

    Great GuY..!! Awesome video 🙂

  22. Rich Williams
    April 17, 2019 at 04:56

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

  23. ipwnublind
    April 17, 2019 at 04:56

    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.

  24. Jarrett Jamison
    April 17, 2019 at 04:56

    My Dev Tools won't even open. How can I fix this?

  25. Syeda Sultana
    April 17, 2019 at 04:56

    Kayce is cute

  26. Zoeira Total
    April 17, 2019 at 04:56

    video starts at 4:46

  27. Hung P
    April 17, 2019 at 04:56

    YOU'RE TOO CUTE. I'm being distracted and can't really focus.

  28. Cam SB
    April 17, 2019 at 04:56

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

  29. Stephan Onisick
    April 17, 2019 at 04:56

    Liked your video. Good Resolution. Great Clothes.

  30. venkatesh nk
    April 17, 2019 at 04:56

    wheR IS THE LINKS?

  31. Bill Windsor
    April 17, 2019 at 04:56

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

  32. Andrew Theodore
    April 17, 2019 at 04:56

    that's a great jacket

  33. M4ndoo
    April 17, 2019 at 04:56

    I didn't know Star Lord was a developer

  34. Okuhle Vonco
    April 17, 2019 at 04:56

    Simple, clear and informative. Thanks

  35. shymultimedia
    April 17, 2019 at 04:56

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

  36. Trevor Joseph
    April 17, 2019 at 04:56

    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

  37. Zied Ben Ahmed
    April 17, 2019 at 04:56

    THINKS A LOT BRO FROM TUNISIA

  38. Harris Elliott
    April 17, 2019 at 04:56

    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!)

  39. Bruno Vincent
    April 17, 2019 at 04:56

    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;)

  40. Rika De Wulf
    April 17, 2019 at 04:56

    How can I download developer loops f12? Please tell me

  41. K.J. Ye
    April 17, 2019 at 04:56

    This is so dope! Ty!

  42. pplatinumss
    April 17, 2019 at 04:56

    When can devtools dynamicly change non .js files, ie inline javascript in the html file

  43. youee1234
    April 17, 2019 at 04:56

    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

  44. microdeath1000
    April 17, 2019 at 04:56

    what if your on a chromebook

  45. ErnestGTY
    April 17, 2019 at 04:56

    i'm ashamed to say i've been using console.log for far too long now. it's time to change

  46. Kellen
    April 17, 2019 at 04:56

    2:32 lol who says "button" like this?

Leave A Comment

You must be logged in to post a comment.