DEV Community

Denise Pen
Denise Pen

Posted on


Like all javascript programmers I will frequently throw a console.log into my code. I find it so much faster to log to the console than to deal with debugger for quick sanity checks. Recently I came across console.table which blew my mind and won a permanent place in my heart.

What Is It?

It's exactly what it sounds like - it allows you to log your data to the console as a table. Let's say we have the following array:

let people = ["Frank", "Mary", "Bob"]

If we use console.log we get this output in the console:

["Frank", "Mary", "Bob"]

However, with console.table we get:

You can see that we get a list of each item in the array as well as the item's index (or position in the array).This might seem like overkill for such a simple array but console.table can also be used for objects. In fact the Mozilla Web Documents state:
If data is an array, then its values will be the array indices. If data is an
object, then its values will be the property names.

Let's look at an object:

let courses = {
math: "calculus",
science: "biology",
language: "french"

console.log gives us this:
while console.table gives us this:

Now, an array of objects:

Let's look at the following array:

let students = [
name: "Beth",
course: "Math",
age: 25
name: "Adam",
course: "English",
age: 29
name: "Amy",
course: "Physics",
age: 32

console.log will return:

console.table returns:

This is fantastic because now our complicated array of objects is in an easy to read table. For me, it's so much easier to understand and grapple with data when it's in tabular form.

One Last Thing...

When using console.table you can also restrict the columns that are shown in the table. Continuing with the array of objects used above, if we only want the student's names and ages logged out we could use the following:

console.table(students, ["name", "age"])

to return:

As you can see, console.table gives you a few options to quickly review and analyze your data on the fly.

What other debugging tools have you stumbled across that could be helpful?

Top comments (6)

somedood profile image
Basti Ortiz

console.table is indeed a great tool to display data. Just to add, I find that console.dir is an underrated and often misunderstood method of the Console API. It's quite useful when you not only want to see the value of, let's say, a string but also its properties and methods.

Also, for those interested, these posts give great tips on how to better debug your code.

denisepen profile image
Denise Pen

This is so good! Thanks!

nickytonline profile image
Nick Taylor • Edited

@umaar is a whiz when it comes to DevTools. You should give him a follow. He also has a great newsletter for DevTools tips,

You should ask @umaar if he'd be up for an AMA. He's a dev tools guru. I signed up for his last year and it's🔥💯

umaar profile image
Umar Hansa

Thank you Nick!

feralamillo profile image
Feralamillo • Edited

Nice article! I am trying to include also an array inside the object but when it logs it gets appended and breaks the beauty of the table.

Without the array

Table Formatted

With the array

Table with issues

nitzahon profile image
Nadav Gur-Arieh

its great! Is there anyway to copy it from the devtools console/ terminal as a table that can be pasted into excel for instance?