JavaScript debugging with Chrome DevTools

Daniel Verner -

Tracking down what happens in JavaScript code is not always trivial, especially when many event handlers and/or asynchronous ajax calls are involved. Using console.log in these cases can be tiresome and ineffective, in this article I am going to show the basics of how to use Chrome DevTools for debugging JavaScript.

Getting started
Open the inspector (Cmd+Option+i or Ctrl+Shift+i), and navigate to the Sources tab, and choose the JavaScript file you want to debug on the navigation bar on the left-hand side.

Add a breakpoint by clicking on the line number:

Run the code in the browser, when the debugger stops, you can use the usual things to debug your code including:

  • Step into function – F11
  • Step over – F10
  • Step out of function call – Shift + F11
  • Watch variables
  • Inspect local variables

Additional useful features
I’ve recently learned some very handy features to use while debugging.

Adding a debugger; command to the code the debugger stops executing the code, it is a very quick way to add a breakpoint, no need to browse the source files in the dev tools.

Similar to the console.log, but it shows the variable as a table, useful to quickly check the values of complex variables.

Pretty print
If you need to inspect/debug minified code (especially in production) devtools can pretty-print the minified code by clicking on the curly braces in the bottom left corner of the main debugger window:

The pretty printed output is not as clean and useful than the original source code, but it is more understandable/debuggable than the minified version, it looks like this:

There are many more features of the dev tools, if you are interested please check the official documentation here:

Tags: Debugging · javascript · devtools · howto

Want products news and updates?

Sign up for our newsletter to stay up to date.

We care about the protection of your data. Read our Privacy Policy.

Impressions from our Team

  • Happy birthday 🎁🎈🎂 Filip - #

  • Another day another #mandarinacakeshop 🎂 😀 - #

  • Happy Birthday Ognjen! And marry Christmas to all other 🎄#notacakeshop - #

  • #Office #Garden - #

  • #workhard - #

  • #belgrade #skyline - #

  • #happybirthday Phil :) - #

  • #happybirthday Stefan 🥂 - #

  • #happybirthday Lidija 🍾 - #

  • Say hi 👋 to our newest team member ☕️ - #

  • #bithday #cake 😻 - #

  • #stayathome #homeoffice #42coders - #

  • #stayathome #homeoffice #42coders #starwars :) - #

  • #stayathome #homeoffice #42coders - #

  • We had a really nice time with #laracononline #laravel - #

  • Happy Birthday 🎂 Miloš - #

  • Happy Birthday 🎂Nikola - #

  • #42coders #christmas #dinner what a nice evening :) - #

  • Happy Birthday 🎂 Ognjen - #

  • Wish you all a merry Christmas 🎄🎁 - #

See more!

© 2024 42coders All rights reserved.