Marius Schulz

Advanced JavaScript Debugging with console.table()

Yesterday, I learned about a nifty little JavaScript debugging feature which is part of Chrome's developer tools. During Web Developer Conference Compact, Marcus Ross (@zahlenhelfer) gave a talk about the various JavaScript debugging tools implemented in Chrome, one of which is the console.table() function I want to show here.

Logging Array Data with console.log()

Imagine you have created this list of programming languages and their file extensions:

var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.log(languages);

The console.log() call will give you the following representation of your data:

Console Output for console.log

That tree view is helpful for debugging purposes, but I find it a little cumbersome to have to open every collapsed object manually. I'm saying we can do a little better with console.table().

Logging Array Data with console.table()

Instead of calling console.log(), we'll use console.table() now:

console.table(languages);

Make sure the console is opened before refreshing the page, otherwise you won't see any output. If you did everything correct, you'll be rewarded with this nice, little table view:

Console Output for console.table()

Pretty neat, isn't it? And the best thing is — the columns are sortable:

Console Output for console.table() (sorted)

Of course, tables work best for tabular data. If all the objects have a totally different structure, you'll end up with most of the cells containing undefined values. Still, the property values are neatly arranged and give you a good overview.

Logging Object Data with console.table()

Another nice thing about console.table() is that it also works with objects:

var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

Console Output for console.table() called with an object

'nuff said.

Filtering the Displayed Object Properties

If you want to restrict the columns to certain properties, you can pass an array of their keys as a second parameter to the console.table() call:

// Multiple property keys
console.table(languages, ["name", "paradigm"]);

For a single property, a simple string is sufficient:

// A single property key
console.table(languages, "name");

Bottom Line

I thought I knew about most of the functionality that comes with Chrome's developer tools, but clearly I was wrong. They're crammed with lots of useful functionality just waiting for you to use it. Seriously, go check out the official documentation page; chances are you'll discover some awesome feature you didn't know about.

Update: Want to learn about more helpful console methods? In the meantime, I've written another blog post about measuring execution times in JavaScript with console.time().

Marius Schulz

Computer science student, developer, and blogger. I love C# and JavaScript, enjoy regular expressions, and probably drink too much coffee.

Next post: Measuring Execution Times in JavaScript with console.time()
Previous post:

47 Comments

Miron

Cool, thanks for sharing!

Sandesh

Thanks for sharing, BTW I didn't find console.table in official console API.

malles

Note that it works in FireFox, but is doesn't display (index) like Chrome does...

abani ranjan behera

Nice information. This will really help us in our day to day development activity.

Justin

Thanks for sharing.

really help full while working with json data .

Arvind Bhardwaj

This is really helpful. Thanks for sharing.

Thomas Jensen

Great tip, I had forgot all about that feature.

Using Backbone? Quickly print a collection:

console.table(collection.map(function(m) {
    return m.attributes;
}));
Jonathan

Yeah, cool tip. I needed something like that when debugging my project!

Thx

Lucker

Thanks for sharing. is works in FireFox and Chrome,but not works in IE9. have a error.

SCRIPT438: Object doesn't support property or method 'table' 
test_console_table.html, line 22 character 2
sushil bharwani

Nice Tip, thanks for sharing.

Marius Schulz

@Lucker: Internet Explorer doesn't support console.table().

Brad

sweet! - I was just googling for this and found your post.... niceness!

Brad

Note: The docs for this are here

libran

This is very useful, thank you!

Myles

Ah this is so useful! Thank you!

Mark Wylde

This is amazing, thanks for sharing. I get this feeling there are many of these little tricks in Chrome that many don't know. This will come in so handy for a BI project I'm working on.

Chyld Medford

Great tip!

Jamie Popkin

Wicked! My console output will never be the same. Thanks Marius. ☺

Daniel Stern

This is absolutely ridiculous!

My console logging is changed forever. I can't believe no one mentioned this sooner....

João

Very nice. Thanks for the tip.

sharonli

cool ~~~ , thanks for sharing

Max

This is not supported in Firefox itself but in Firebug. Big difference.

thirumanikkaraj.a

it's really helpful while working in json object. Thanks for sharing

Enes

Very useful. First thing I tabled is console: console.table(console).

Pushker

this is useful but debugging is easy with objects not table/

Stacy

This is really nice. Thanks for sharing it.

Linda  Bautista

This is awesome. And you can combine this with expandable groups:

console.groupCollapsed("List of programming languages");
console.table(languages);
console.groupEnd();
Ryan

Thanks for sharing, this feature works perfect with both front-end and back-end development. I wrote an article about how to use console.table with Chrome Logger

SarathbabuMB

Good one. Thanks

Nilesh

Thanks for sharing!

It makes debugging more fun.

Antonio Brandao

Also console.dir() and console.trace() are good

Ibrahim Islam

This was awesome to know :)

Charlie

Very cool, thanks for sharing! My life is suddenly much easier...

Rajsekhar das

Thanks for sharing.. It awesome. (y)

Miguel Mota

Never knew this existed. HELPFUL!

David Famarini

Thanks for sharing. It awesome.

Alex

Micsoda tipp!!!

Leave a comment

Marius Schulz on Twitter Marius Schulz on GitHub RSS Feed