Using console.table to Display Tabular Data

As a developer, there are many instances where you will find yourself working in the console, trying to decipher some output that was called with a console.log. You will find that much of the time, the data that is being displayed to you will be formatted in a way that is unintuitive and it may take you longer than it should to figure out what it is trying to tell you. If the data that you are visualizing could be formatted as a table, then it is possible that you can use a little known feature in some browers called console.table.

A call to console.table with some tabular data being passed in will output a styled and easy to read table. A good starting demonstration of this would be a two dimentional array.

var friends = [["Chris", 22, "Brown"],["Bob", 25, "Blond"],["Adam", 29, "Ginger"],["Amy", 24, "Black"]];

The above array contains a few inner arrays which have three elements each. Each element's position corresponds to the name, age and hair color of that person in that order.

If were were to console.log this it would appear like this:

But, as a table, it looks like this:

You can see that the table allows you to much more efficiently digest the information that is being provided and saves you from having to expand all of the different inner arrays.

The console.table function can do a little bit more than what I've demonstrated here. You can learn more at MDN.

I hope you've found this tip useful and it helps save you time in the future.