The console is the built-in debugger of the browser. Many developers use console.log() all the time to print messages and debug problems in their code. But this tool has a lot more to offer than you may have ever realized!

Intro — The Console Object

Let’s try something simple and run:

console.log(console)

As we can see, the console object has a lot more to offer than the good ol’ console.log()function.

The truth is that there is probably a better way to log anything you need. All it takes is to know the alternative options you have and to get yourself used to them.

In this article, I’m going to introduce some of the more useful functionalities of the console object that I’ve adopted during my time as a web developer. After taking a look, you can judge for yourself if console.log() should remain your only go-to option for print debugging.

Let’s create a test object to use as an example:

And that’s how it looks when we call console.log() with our object:

console.dir()

While console.log() prints the object in its string representation, console.dir() recognizes the object as an object and prints it’s properties in the form of a clean expandable list:

console.assert()

With console.assert(), we can decide only to log something if a condition is false and save some console space by avoiding unnecessary message printing:

console.count()

Instead of incrementing a counter manually, we can use console.count() to do the job for us! We can provide it with a label (“Pets” in this example), and the counter value will increment each time console.count(“Pets”) is called:

console.table()

My personal favorite! Use console.table() to print a visually nice table representation of an object with labeled rows for each the objects’ properties:

console.time() / timeLog() / timeEnd()

A popular one. Use console.time() to start a timer. Then, with each call to console.timeLog(), the time elapsed since the timer started will be printed.
When done, call console.timeEnd() to print the total amount of time:

console.trace()

Another very useful one! When debugging deeply nested objects or functions, we may want to print the stack trace of the code. Call console.trace() from within the function you want at the top of the call stack, to see the exact places in the code that called it:

console.group() / groupEnd()

It’s possible to group messages to avoid spam and mess in the console, like so:

Extra tip: use console.groupCollapsed() instead of console.group() and the group will be collapsed by default. This also makes things easier on the eyes.

Bonus: CSS styling the console

Just in case you want to flex your new godly logging abilities, use “%c” before a string and pass CSS styles as another argument:

Now you can practically use the console to paint anything! 🎨

Summary

Sometimes we don’t realize we can make our lives as developers a little bit easier just by adapting new small habits, like being a console pro 😎.

I hope you find this information useful.
Happy debugging!