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:

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

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:

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

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:

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:

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.