Javascript: Console.log & Beyond
Tags: tutorial, tips, javascript, console
Published: 2020-12-27 18:04:23

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

```jsx
// 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. 

![https://i.stack.imgur.com/gWtuq.png](https://i.stack.imgur.com/gWtuq.png)

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.

![https://i.imgur.com/17RcrLc.png](https://i.imgur.com/17RcrLc.png)

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

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

Which will output the following:

![https://i.imgur.com/0nvDPKC.png](https://i.imgur.com/0nvDPKC.png)

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

```jsx
// 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:

![https://i.imgur.com/z7zleUD.png](https://i.imgur.com/z7zleUD.png)

***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.dir`ring. 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.

![https://i.imgur.com/1IVC9kV.png](https://i.imgur.com/1IVC9kV.png)

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:

![https://i.imgur.com/DMLMewT.png](https://i.imgur.com/DMLMewT.png)

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

![https://i.imgur.com/s5Cp0LL.png](https://i.imgur.com/s5Cp0LL.png)

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

![https://i.imgur.com/q4fZ9qw.png](https://i.imgur.com/q4fZ9qw.png)

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

![https://i.imgur.com/7I9N7m0.png](https://i.imgur.com/7I9N7m0.png)

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:

![https://i.imgur.com/vwJRXth.png](https://i.imgur.com/vwJRXth.png)

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

![https://i.imgur.com/xGTtecV.png](https://i.imgur.com/xGTtecV.png)

![https://media.giphy.com/media/VfDqzZ3Efb67HCN2n6/giphy.gif](https://media.giphy.com/media/VfDqzZ3Efb67HCN2n6/giphy.gif)

And thats that! These are just a handful of the methods that are included with console.

As always you can find more info [over on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console), including the list of properties you can use to style your logs

Feel free to reach out on any of my socials for questions, feedback (good and bad), or just to connect / say hello 👋.