Taking console.log To The Next Level
Tags: javascript
Published: 2021-04-29 18:53:05

As a JavaScript developer, you are obviously familiar with this extremely powerful debugging tool, which is... `console.log`. 🙄

But are you really using it to its full potential? In this article, I'll show you how powerful and impressive this tool can be.

# Arrays And Objects

Let's start with the basics. When working with arrays, the first thing you can do is simply logging them with the default `log` method on the `console` object.

```java
const fruits = ['🍎', '🍐', '🍌', '🥝']
console.log(fruits)
```

And here's the output:

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

But what if you're working with a 2 dimensional array?

```java
const foods = [['🍎', '🍐', '🍌', '🥝'], ['🥕', '🥔', '🥦', '🧄']]
console.log(foods)
```

Output:


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

Not very convenient...

Now, you can either click the arrow on the left of the `(2)`, or use another method of the `console`object, which is: `table`.

```java
console.table(foods)
```

This outputs the following table:

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

This table contains as much rows as the number of arrays contained by the parent one (here, 2).

You now get a more user-friendly display of that 2 dimensional array! 💃

When dealing with objects, here's another trick you can do to enhance your loggings:

```java
const user = {name: "Jim", age: 18, country: "USA"}
console.log("Logged in user : %o", user)
```

This command displays the following:

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

# Adding Styles

So far, we've seen how we can display arrays and objects in a more beautiful way. Now, something most of us don't know about, is that we can add styles to our logs. 🎨

Don't believe me? Here's how:

```java
console.log("%cHello, world!", "color: green; font-weight: bold; font-size: 1.5em")
```

How does this work? Everything after the `%c` will have the styles passed in the second parameter of the `console.log` method applied to it. These are CSS styles, that you pass as a string, as you would use them inside the `style` attribute in HTML.

Thus, here's the output:


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

You can have different styles for the same text:

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

You can also add borders, paddings, border-radius...

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

Dazzling, isn't it? 😏

> But... why would you want to add styles to a console message? 🤨

According to me, the two reasons you might want to use this are either to have fun (when you discover you can do this) or to add Easter eggs to your application. Here are some examples:

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

NB: this is not my YouTube channel. 😉

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

For a complete list of all the CSS properties you can use, just refer to the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#usage).

# Errors And Warnings

At some point in your code, you might want to display text in a different way than the basic one. If you've ever opened the dev tools in a popular website (such as YouTube, Facebook...), you might have noticed those different types of messages:

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

But did you know that you can also do this? And guess what: that's as easy as `console.log`!

There are different methods for that:

- `console.error` for error messages
- `console.warn` for warning messages

How to use them? The same way as you use `console.log`! 🤩

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

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

# Conclusion

As we've seen in this article, we can enhance our logging messages with features most of us didn't know about! These features maybe be gadgets, and you might not need to use them frequently, but they can be useful in some situations. So it's always good to know them!

And hey, you can show off to your friends. 😎

That being said, don't forget to remove your `console.log` from your code when using production environment, as these methods are development tools! 😉

---

Thanks for reading this article. ♥