Tricks for Using the JavaScript Console

If you are new to Javascript, chances are you are usingconsole.log() to debug your code like it’s going out of style, which is a great first step! But did you know that there is more to console that meets the eye? Below are a few helpful hints on how to take your debugging skills to the next step.

Trick #1: Adding Text as an Argument

Result of my log in the Chrome DevTools. I can confirm that my function, fetchToys, is working as expected and it is rendering the object collection I anticipated. Everything looks good!

Keep in mind that console.log() will print the elements passed in an HTML-tree format. This is a great way to narrow the scope of the DOM and zero in on what you are looking for.

Trick #2: One Log to Test Them All

If only there was away to avoid all of these repetative logs…

If you find yourself using console.log() multiple lines in a row, like in the code above, consider wrapping them all up in a single log.

You can add multiple arguments to a single log to cut down on repetitive code.

The beauty of console.log() is that it can take in multiple arguments so you can spend more time debugging and less time typing. If adding everything to a single console.log() gets too confusing, consider passing your elements in as an array with text to separate things a bit in the console.

Pass arguments as arrays to make them easier to read in your browser console.
To inspect each element further, just click on the arrows, or disclosure triangles, to reveal more information.

Check out the MDN web docs for more details on the console.log() syntax and use.

Trick #3: To Log, or Not to Log…

A snapshot of the list of attributes for a div that was passed through console.dir().

Trick #4: Putting it All on the Table

A simple solution to this is another console method called console.table(). This method will take in objects or arrays and display them in an easy to read table that is also sortable! To sort the data, simply click on the column header and it will reorganize in either ascending or descending order.

In the code above, I am passing a json collection through console.table()
Above is the table with all of my json data. This allows me to quickly see the conent of my fetch request and the properties associated with the data.

This makes debugging large collection of data more tollerable and skimming incoming data from an API pleasurable.

If you happen to pass through an object and not an array, you’ll notice that the (index) will populate with the keys of the object rather than the ascending list of index numbers.

These are just a handful of helpful console tricks that have made debugging my JavaScript code a little bit easier and more efficient. For more information on the various methods available for the console, check out the MDN web docs.

If you have mastered the art of the console and are ready to take your debugging skills to the next level, check out Chrome’s DevTools tutorials for JavaScript.

Software Engineer, volleyball player, lover of tiny houses and all things spicy.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store