Check out this awesome trick that I just discovered. You can use console.table to format data in a nice table in Chrome. Open Chrome developer tools (press F12). Then create an array of hashes of data. The hash keys will be used as table columns, and the values will be used as table rows.

Here's a simple example. Let's simply enumerate the alphabet, convert it to upper case, and also convert it to hex. Copy this to developer console:

var data = [];
var alphabet = "abcdefghijklmnopqrsuvwxyz".split('');
alphabet.forEach(function (char) {
  data.push({
    lowerCase : char,
    upperCase : char.toUpperCase(),
    hex       : "0x" + char.charCodeAt(0).toString(16)
  });
});

console.table(data);

Here's the result:


This is the table that Chrome draws when you run console.table

Apparently console.table has been in Chrome since February 2013 but I only discovered it now. Next time I need a table, I'll just dump data in Chrome's developer console and create a screenshot.

Comments

September 23, 2014, 19:02

very cool! What else would be helpful to output like that? Hmmm

sean Permalink
September 27, 2014, 11:37

you forgot the letter t, the most common letter.

var data = [];
var alphabet = "abcdefghijklmnopqrstuvwxyz".split('');
alphabet.forEach(function (char) {
data.push({
lowerCase : char,
upperCase : char.toUpperCase(),
hex : "0x" + char.charCodeAt(0).toString(16)
});
});

console.table(data);

October 05, 2014, 15:33

t happens. :)

March 23, 2015, 00:03

Supported in Firefox since 34, too. MDN has big warnings that it's non standard, though.

Leave a new comment

(why do I need your e-mail?)

(Your twitter handle, if you have one.)

Type the word "halflife3_435": (just to make sure you're a human)

Please preview the comment before submitting to make sure it's OK.

Advertisements