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" }


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:


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 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.

Also, make sure to check out my other posts about the Chrome Developer Tools:

Use the coupon code LAUNCHDAY for $10 off!

Learn React



Cool, thanks for sharing!


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


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.


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( {
    return m.attributes;

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



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
Marius Schulz

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


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


Note: The docs for this are here


This is very useful, thank you!


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.

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....


Very nice. Thanks for the tip.


cool ~~~ , thanks for sharing


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


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


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


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


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");

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


Good one. Thanks


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 :)


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.

L. Daniel Nordstrom

Someone mentioned it working in Firefox. Someone else said it didn't work in Firefox, but as part of Firebug.

I'm here to say it works great in Firefox Nightly (34.0a1), and it looks much neater than in Chrome, with an "(index)" column and zebra rows.

(I don't have Firebug enabled, since the Developer Tools are awesome enough.)


Thanks. Works on Opera 26 :)


Just what I needed when I needed it! ^_^

Shubham Kumar

Thanks for sharing... Its cool...

Samit Laxman Pise

Nice & Thanxxx...

Abhishek Jha

Great, nice feature, will make debugging easier.

Cory House

This is awesome! Love the ability to quickly filter and sort. Thanks for sharing!


Awesome post! Its very helpful to me and other also.

It might help to others.


Nice article. Thank you for sharing. Very Helpful


thanks for sharing>>> good idea


Very helpful, thank you.


Good to know! Thanks!


It's very helpful! Cheers!


Thank you. Solved my problem by reading this article.


First of all, awesome article -- thank you! How would you use console.table() to examine data returned via AJAX call?


Thanks it's a nice tips. Please can you help me with this. var data = []; data. push({name:"prince", age:27}); How do I retrieve the value prince from the array of objects?. Thanks as I look for to hearing from you.

Hichem ben chaabene

Looks like console.table doesn't work yet in typescript unless you use


Old post, but JSON.stringify(jsondata, null, 4) gives a nice formatted output. 2nd parameter can be a replace function, 3rd parameter can be a string or number of spaces to indent.