Skip to content

Ruairidh Codes

Console Log Tricks

javascript, debugging, workflow2 min read

How to use console.log

The typical JavaScript engineer loves console.log and will use it on a daily basis. In fact, they probably end up in situations like this:

Image of distracted programmer looking at console.log while debugger gazes in horror

You're better than that, right? Obviously you use the incredible debugger that JavaScript provides to find out what's happening in your code.

But just in case you still use console.log all the time, then you should at least be good at it! In this post, I'll share with you some quick tips and tricks on using console.log effectively.

console.table

Ever want to render out a bunch of data in an easy-to-read format? Well, console.table() is just what you need.

This takes either an array or an object, and renders it into a beautiful table in a single line. Take a look below:

There's also the ability to filter this table, by passing a second parameter on an array, such as:

1const people = [
2 { name: "Ruairidh", role: "Software Engineer" },
3 { name: "Sean", role: "Software Engineer" },
4];
5
6console.table(people, ["name"]);

console.assert

It's possible to run some quick tests in your browser without reaching for jest straightaway.

Using console.assert you can check things like object equality, or whether string lengths match.

To do so, you simply pass your assertion, a list of objects to output, and a message.

For example:

Here you can see we are asserting the existence of two HTML elements. The one that is there returns no error, but when an assertion fails, it shows up in the console.

1console.assert(document.getElementById("foo"), "No such element on the page!");
2
3console.assert(document.getElementById("bar"), "No such element on the page!");

console.dir

No doubt you've googled "[**Object object] console.log**" in the past, and you've been told the best thing to do is to run:

1console.log(JSON.stringify(yourObject));

Well, that works, but you can also do it with console.dir which neatly formats your object into a directory structure. Check out the Repl below:

Here we can see that console.log eventually stops printing out nested objects and just provides a [Object] string representation which isn't helpful.

Instead we can use console.dir(object, {depth: null}) which takes a second optional configuration object where we can specify that it should keep traversing the object so we can see all of its entries.

console.time

Want to find out how long a function takes and benchmark your work? Enter, console.time

This is very simple, you start a timer, and then end it, returning the elapsed period. So for example:

Here we can see whether running forEach or map on an array is faster. We set a timer, run our function, and then end the timer.

It's worth noting though that this is a general guide. If you want to benchmark seriously, then you'll want to use the Performance API which provides a far more accurate overview.

If you just want to get a feel for what could be slowing things down, then console.time isn't a bad start.

console styling

This last one is just for fun. Maybe you want to leave a message in your console advertising a job, providing a warning, or something else.

You can pass CSS to the console through string interpolation:

Here you just need to pass a string substitution %s and then the CSS you wish to include.

Conclusion

So now you're a console.log pro! I still encourage you to actually use the debugger for proper bug hunting, but the console.log tips and tricks here should help you get things done faster at work.

If you're looking for more then you can do the meta console.log(console) or check out MDN.

Want more cool articles like this? Check out my mailing list below, or let me know what you think at my twitter.

Subscribe to the Newsletter

Subscribe to get my latest content by email.

    I won’t send you spam.

    Unsubscribe at any time.



    © 2021 by Ruairidh Wynne-McHardy. All rights reserved.