DEV Community

Cover image for Taking console.log To The Next Level
Ludal ๐Ÿš€
Ludal ๐Ÿš€

Posted on • Updated on

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)
Enter fullscreen mode Exit fullscreen mode

And here's the output:

Alt Text

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

const foods = [['๐ŸŽ', '๐Ÿ', '๐ŸŒ', '๐Ÿฅ'], ['๐Ÿฅ•', '๐Ÿฅ”', '๐Ÿฅฆ', '๐Ÿง„']]
console.log(foods)
Enter fullscreen mode Exit fullscreen mode

Output:

Alt Text

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)
Enter fullscreen mode Exit fullscreen mode

This outputs the following table:

Alt Text

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)
Enter fullscreen mode Exit fullscreen mode

This command displays the following:

Alt Text

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")
Enter fullscreen mode Exit fullscreen mode

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

You can have different styles for the same text:

Alt Text

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

Alt Text

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

NB: this is not my YouTube channel. ๐Ÿ˜‰

Alt Text

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:

Alt Text

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

Alt Text

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. โ™ฅ

Discussion (1)

Collapse
arturkot95 profile image
Artur Kot

Great tips, thanks