Javascript: Console.log & Beyond

#tutorial #tips #javascript #console

You've been there before — you just want a quick way to debug your code — so you do this:

// some code here
console.log("Is this working?")
// some code here too

While theres nothing wrong with quickly throwing in some console.log 's to debug your code, console goes beyond just console.log. This article will cover a few of the ways you can get the more out of the console.

CLEAR

This one is pretty straight forward — you've console.logged quite a bit and now you want a clean slate. If you didn't know about console.clear you've probably been clicking this button below, or simply refreshing the page to get rid of your logs.

All it takes is a quick console.clear() and your console will be clean and ready to go. It'll even let you know that the console was cleared.

COUNT & COUNTRESET

If you want a quick way to keep a running count of particular values that appear, you can make use of console.count. It'll look something like this:

let animals = ["🐶","🐱","🐷","🐢","🐶","🐶","🐢","🐢","🐷","🐢"]
animals.forEach(animal => console.count(animal))

Which will output the following:

If we want to reset any particular counter we can do the following:

// Assuming we still have the same counts as above
console.countReset("🐷") // Remember -- this counter was originally at 2

Now if we count the pig emoji again we'll notice that it was reset, while the other counters remain untouched:

DIR

When you first use/look at console.dir you may notice/assume that it's very similar to console.log. Dir gives you a dropdown list of the properties of the JS object that you're console.dirring. Some browsers will give the same exact dropdown list of properties whether you use log or dir , but you can really see dir shine when looking at a DOM element.

Here temp1 refers to an element on a page. When using console.log you'll see that we just get the element itself, but when using console.dir we get the entire property list of the element (the rest is there, trust me 😂).

ERROR, INFO & WARN

These three are pretty straight forward. They are simply different ways to display your logs while assigning a level to them — which allows you to filter them with the built in filter feature in the console. Some browsers will add additional styling to console.info , mine did not in this case.

Here is what they look like in action along with the filter dropdown that you can make use of:

TABLE

Last but definitely not least, if we have an array or an object — or an even an array of objects, we can prettify the data with console.table like so:

An array — will display a table with the index + value:

An object - will display a table with the keys and values

An array of objects — will display a table with the object keys as column headers

Not only are these tables easier on the eyes and sortable, but we can also restrict the columns shown by passing in an array of the key(s) we want to display as the second argument like so:

BONUS — STYLING CONSOLE OUTPUT

You can even style your console output with CSS by passing a second parameter that includes your desired styling, while also making use of %c just before the part of the log you want to style — meaning, everything to the right of %c will be styled, while everything to the left will stay the same. Here it is in action: