Learn About the Console Object and Become a Console Commander 🎖
Tags: javascript, webdev, codenewbie, tutorial
Published: 2020-06-19 15:05:02

---
title:  Learn About the Console Object and Become a Console Commander 🎖
published: true
description: Become a Console Commander! The console object has a lot more inside it than just a log method that could make your life easier when debugging the JS developer way.
tags: javascript, webdev, codenewbie, tutorial
cover_image: https://imgur.com/tquZ5iW.png
---

## The console Object and Useful console Methods. 💜

The `console` is the #1 way to debug by JavaScript developers. So if you are going to be using the console to do sophisticated debugging we might as well get a little more knowledgeable about some of the cool things you can do with the console. The console has a lot more than just a simple `console.log` command. In this video/post, I'm going to show you some alternatives to using just log so you can get much more useful console output.

---

You can watch my video explanation here or scroll on to keep reading. 💜

{% youtube G7kzLpvbFYo%}
⏱ There are timestamps in the video for each method if you check out the description of the video. 

---

## Intro
The console has much more than just a log method. Let's look at the number of things inside the console object. 👇

![The console object contents](https://imgur.com/5kwZD6o.png)

Surprised? I know I was the first time I explored `console` object.

## warn & error
One of the easiest ways to show significant messages in the console over the plain text is using the console is the warn or error methods.
![Sample of using the console.warn and console.error](https://imgur.com/kBuxwCZ.png)
So if we use `console.warn` we see this yellow output which signifies a warning and then the `console.error` shows up in red. 
This is useful if you are going to expose certain warnings and errors to other developers. 

## dir
When using console.log on simple objects and things like that there is very little useful difference in my opinion.
Let's look at the difference between log and dir on our user first.
![Showing the difference of a logged object in console.dir versus console.log](https://imgur.com/bCUNHz3.png)

As you can see, other than displaying that it is an Object, there is very little useful difference.

BUT where this gets interesting is when we start using DOM nodes. So let's look at the difference when we use `dir` and `log` on `document.body`.

First with `console.log(document.body);`.
![Showing the what is displayed when using console.log(document.body);](https://imgur.com/AOBPio6.png)

Then with `console.dir(document.body);`.
![Showing the what is displayed when using console.dir(document.body);](https://imgur.com/wdbrRMq.png)

Notice:
- console.log prints the element in an HTML-like tree
- console.dir prints the element in a JSON-like tree

Specifically, console.log gives special treatment to DOM elements, whereas console.dir does not. This is often useful when trying to see the full representation of the DOM JS object.

## count
With `console.count`, we can do something which is a very common use case and that checks how many times something has been called. In this instance, I'm going to want to count how many hobbies we have as we iterate over them. 

`console.count` takes an optional label parameter, if you pass it nothing it defaults to `"default"`.

![Showing the usage and output of console.count](https://imgur.com/UbAX8wn.png)

By using `console.count` we can avoid making variables to just count how many times we call a function. 

## assert
With `console.assert`, we give an assertion message if the evaluated value inside the assert is falsey, we can then pass it a label as a second parameter to which will be shown in our assertion messages. 

In this example, we will use the same `user` object as in the `console.count` example to make sure a hobby exists.

![Showing how console assert only shows if the condition is false](https://imgur.com/5VjsyV1.png)

By using `console.assert` we can show messages only when something goes wrong a lot of the times (like in this case when something isn't found) which is pretty useful for not showing a console.log every time we run something.


## table
With `console.table` to you can print a visually nice table representation of an object with labelled rows for each the objects properties. You can even click on the columns to sort them.

![Showing the nice output of a table when using console.table](https://imgur.com/0kVxUz9.png)

I abuse this one a lot anytime I reach to a new API or have anything with more than a handful values in it (yes a handful is a  computer science term, don't look it up).

## time, timeLog & timeEnd 
These ones are pretty handy for some performance testing if you suspect something is taking longer than expected and need confirmation.

- `console.time("label");` starts the timer.
- `console.timeLog("label");` logs the time since you started the timer.
- `console.timeEnd("label");` stops the timer and logs the time since the timer started. 

In this example, I am creating a function to show the usage of each of the time methods.

![Showing an example of time, timeLog & timeEnd ](https://imgur.com/gvGbZHG.png)

The label is optional and will default to `"default"`. Just make sure when using labels they correctly correspond to each other or else you might run into some issues where you are starting and stopping the default or some other timer (in cases you are logging multiple timers).

## trace
With `console.trace()` we can output a stack trace to where you called it. It's a really useful feature to be able to see the call stack to make sure that you are getting to a piece of your code as expected. 

![Showing the console.trace in action](https://imgur.com/CHS2QLv.png)

If you see with this example where I have a function calling a function you might need to double-check it's being called where expected.

## group, groupEnd & groupCollapsed
Well now that we have a bajillion zillion different messages in our console we should learn how to group things and keep things tidy. With the `console.group` command we can create nestable expandable lists of logs.

- console.group("label"); starts a grouping.
- console.groupEnd(); ends the grouping. 

Let's look at in action.
![Looking at how to group items in the console](https://imgur.com/qxO1enP.png)

We still by default take up just as many lines in the console so if we want to collapse our groupings by default we use `console.groupCollapsed`. In this example, we will use `groupCollapsed` to show the difference.
![Showing groupCollapsed having the grouping collapsed by default](https://imgur.com/srBlW4K.png)

Lastly, I wanted to show an example of nested groups.
![Showing nested groupings](https://imgur.com/p2dfJ8A.png)

---

So that was a tonne of different methods to get through. I know everyone will use the `console.table` but what do you think is the most useful here? 🤔

Happy coding! 💜

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)