Taking console.log To The Next Level

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.

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

And here's the output:

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

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

Output:

Not very convenient...

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

console.table(foods)

This outputs the following table:

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:

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

This command displays the following:

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:

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:

You can have different styles for the same text:

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

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:

NB: this is not my YouTube channel. 😉

For a complete list of all the CSS properties you can use, just refer to the MDN.

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:

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! 🤩

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. ♥

Comments

[Artur Kot]

Great tips, thanks