How to become a console.log() ninja
Tags: console, tips
Published: 2021-09-22 12:16:10

If you are a web developer I'm guessing you have used console.log() a couple of (thousand) times. But did you know that the console object has some other usefull methods you can use to structure the output you get?

<!-- wp:heading -->
<h2>What is the console object?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First, a very with a short introduction to the console object before we dive in to its methods.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So what is the console object? The <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" target="_blank" rel="noreferrer noopener" title="https://developer.mozilla.org/en-US/docs/Web/API/console">MDN Web docs</a> sais "The&nbsp;<strong><code>console</code></strong>&nbsp;object provides access to the browser's debugging console (e.g. the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web console</a>&nbsp;in Firefox). The specifics of how it works varies from browser to browser, but there is a&nbsp;<em>de facto</em>&nbsp;set of features that are typically provided." </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In other words, it is a object that is available to use for debugging purposes. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lets take a look at some of the methods it provides. </p>
<!-- /wp:paragraph -->
***
<!-- wp:heading -->
<h2>console.table() </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You have two objects that contains the same structure of information about two pets. You add both pets to an array.</p>
<!-- /wp:paragraph -->

```javascript
let myPet = {name: "Poppy", animal: "cat", age: "2", favoriteToy: "ball"};
let myOtherPet = {name: "Harry", animal: "pig", age: "3", favoriteToy: "food"};

let pets = [myPet, myOtherPet];
```

If you want to print the array to the console you can use `console.log()`, that will look like this:

![Image of console.log ouput](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9vmtp07q3up42i8x5h6.png)
If you would like a better overview of what the array contains you can use `console.table()` instead.

```javascript
console.table(pets);
```
That will give you a nice table presentation of the array content, like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a442hjir1d8c7aywtrz.png)

***
<!-- wp:heading -->
<h2>console.group()</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can use console.group() to create collapsible groups of outputs. For instance you can use it to group output from functions.</p>
<!-- /wp:paragraph -->

```javascript
const function1 = () => {
    console.group("Function 1 output");
    console.log("this is a message from function1");
    console.groupEnd();
};

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
    console.groupEnd();
};

function1();
function2();
```

When the functions are called you will get the messages presented like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0vsc7sjefk9di4y4mcs.png)


**Nested groups**

<!-- wp:paragraph -->
<p>You can also nest groups inside eachother</p>
<!-- /wp:paragraph -->
```javascript
const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
       console.group("This group is nested inside of the 'Other function output' group");
       console.log("Hello from inside this group");
       console.groupEnd();
    console.groupEnd();
};
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqiijsdmjbvdio2rurg7.png)

**collapsed groups**

<!-- wp:paragraph -->
<p>If you want the groups to collapsed as default you can use <code>console.groupCollapsed("name of group")</code> instead of <code>console.group("name of group")</code></p>
<!-- /wp:paragraph -->

***
<!-- wp:heading -->
<h2>console.dir()</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you want to output information about an object in a structured manner you can also use <code>console.dir(object);</code></p>
<!-- /wp:paragraph -->
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9muyilbh9q0molmk0jxi.png)
***
<!-- wp:heading -->
<h2>console.assert()</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want some condition to decide if your ouput is displayed in the console, <code>console.assert()</code> is the function for you. This function takes two parameters, a boolean and a string. The message (string) will only be displayed in the console if the boolean value is <code>false</code>.  </p>
<!-- /wp:paragraph -->

```javascript
const function1 = (condition) => {
     console.assert(condition, "This message will be displayed as a warning if the condition equals false");
};

function1(false);
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyoo6m4pg3s6tsxd8gil.png)

***
<!-- wp:heading -->
<h2>Adding color to your console output</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The console object have two built in functions that will add color to the displad text. These are console.warn() and console.error(). And as you might have guessed they will be displayed as a warning and an error.</p>
<!-- /wp:paragraph -->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swtsefstpg0jks4u8q4c.png)

<!-- wp:heading {"level":3} -->
<h3>Add your own styling</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you add %c before your string, and pass a string of styling as a second parameter you can style your output.</p>
<!-- /wp:paragraph -->
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilto9etcm91ecicwrn7v.png)

***
<!-- wp:heading -->
<h2>Other usefull console methods</h2>
<!-- /wp:heading -->


**Create and use a timer**


<!-- wp:paragraph -->
<p>You can use<code> console.time()</code> to start a timer, and <code>console.timeEnd() </code>to end it. </p>
<!-- /wp:paragraph -->


**Where is your function being called?**


<!-- wp:paragraph -->
<p>Use <code>console.trace()</code> to see where the function was called from</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Resources</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/console" target="_blank" rel="noreferrer noopener" title="https://developer.mozilla.org/en-US/docs/Web/API/console">console </a>(MDN)</li></ul>
<!-- /wp:list -->
***
Did you find this article usefull? [Follow me on twitter](https://twitter.com/acupof_dev) to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. :)

Thank you for reading!

/Eli