Using console.table() in Chrome’s Developer Tools

By India Meisner

There are a few different ways to look at information when we’re using the JavaScript console. Perhaps the easiest and most common way is to use console.log() to display information we want.

We can display just about anything using console.log(), including strings, numbers, arrays, and even objects:

This is pretty straightforward, but what if the data we want to look at is more complicated? For instance, let’s say we had an array of cats:

var cats = [

{ name: ‘Muffin’, color: ‘gray’, pattern: ‘tabby’ },

{ name: ‘Biscuit’, color: ‘multi’, pattern: ‘tortie’ },

{ name: ‘Darko’, color: ‘black’, pattern: ‘solid’ }

];

If we use console.log(), we get our information displayed like this:

This isn’t bad, and we can look inside each element of the array, and even inside that element. But it’s not very easy on the eyes. Fortunately, for those of us using Chrome Developer Tools or Firefox’s Firebug, there’s another way to display information: console.table().

The console.table() command works best for tabular data. Let’s try it on our array of cats:

Additionally, if you click on a column heading, you can sort the table by columns:

This comes in handy for objects as well.

var myCats = {

muffin: { color: ‘gray’, pattern: ‘tabby’, age: 1 },

biscuit: { color: ‘multi’, pattern: ‘tortie’, age: 1 },

darko: { color: ‘black’, pattern: ‘solid’, age: 5 }

}

Another nice feature that console.table() has, is that we can pick and choose what data we want to display. If we only wanted one column, we only need to provide the name of that column:

If we want more than one column, we provide an array of column names, like so:

Happy coding!

dojo guide

Looking for a Career in Web Development?

Read our quick-start guide to becoming a Developer

  • Includes exclusive insight from a seasoned Web Developer
  • Uncovers the top career misconceptions holding you back
  • Highlights the must-have qualities all employers require
  • 89,615 downloads to date

Leave a Reply

Your email address will not be published. Required fields are marked *