DevTools: Support for the console.table command has landed

A new change in Chrome Canary adds support for the console.table command which you may have seen in Firebug previously.

Some examples of how to use it:

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

There is also an optional 'columns' parameter which takes the form of an array of strings. Below, we define a family object containing many "Person"s and can then choose which columns we would like displayed using it:

function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; }

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

whilst, if you just want to output the first two of these columns, use:

console.table(family, ["firstName", "lastName"]);

In addition, you can pass an arbitrary object as a table - it'll just use its properties as indices.

You can also combine this with expandable groups using:

console.groupCollapsed("This is my table");
console.table(family);
console.groupEnd();

Ticket: http://bugs.webkit.org/show_bug.cgi?id=109453
Firebug equivalent: http://getfirebug.com/wiki/index.php/Console_API#console.table.28data.5B.2C_columns.5D.29
Thanks: to +Pavel Feldman for implementing this useful utility.
Photo
Shared publiclyView activity