As wonderful as the console pane is in Firefox and Chrome, its display functionalities tend to leave much to be desired.

One of the newest tools to help with this – having originated in Firebug and having been relatively recently ported over to Chrome’s main build – is console.table(), which lets you print tables to the console! As simple as it sounds, I’ve found it to be an incredibly useful tool, especially when working with some visualization toys where a little structure goes a long way.

The most obvious way to use the command is to pass it a two-dimensional array:

console.table([[1,2,3], [4,5,6], [7,8,9]]);

It also takes a second, optional argument of columns, only printing those specific ones:

console.table([[1,2,3], [4,5,9], [7,8,15]], [0, 2]);

You can also pass a list of dicts, which is advantageous in that you get actual column headers 1:

console.table([{"first": "John", "last": "Doe"}, {"first": "Jane", "last": "Doe"}, {"first": "Rust", "last": "Cohle"}]);

And, with actual column headers, you can specify columns by string:

console.table([{"first": "John", "last": "Doe"}, {"first": "Jane", "last": "Doe"}, {"first": "Rust", "last": "Cohle"}], ["last"]);

Perhaps even more pragmatically, you can pass arbitrary objects to console.table() and it’ll do a good job of representing them. Take this only slightly contrived instance, for example:

function Car(make, model, year) {
  return {"make": make, "model": model, "year": year};

garage = {};
garage.primary = new Car("Honda", "Accord", 2002);
garage.secondary = new Car("Toyota", "Prius", 2011);
garage.midlife_crisis = new Car("Ford", "Thunderbird", 1964);


Compare that to the default tree view, as provided by console.log() 2:

And, just like before, you can filter by column:

console.table(garage, ["make", "model"]);

  1. BTW: the columns are sortable. Just click on the headers. [return]
  2. And four clicks required to decompress the whole thing – the horror! [return]
Liked this post? Follow me!