Advanced JavaScript debugging with console.table ()

Yesterday I learned about one exquisite debugging feature in the Chrome Developer Tools. At the Web Developer Conference Compact , Marcus Ross ( @zahlenhelfer ) talked about various debugging tools implemented in Chrome, one of which I want to talk about.

Array logging with console.log

Imagine that you have an array of programming languages ​​with their corresponding file extensions:

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

After console.log you will see the following:


')
This tree is certainly useful for debugging, but it is rather cumbersome, and it is not very convenient to deploy each node manually. With console.table you can do better.

Array logging with console.table

Instead of console.log, we use console.table:

 console.table(languages); 

Make sure the console is open before refreshing the page, otherwise you will not see anything. If done correctly, you will see the following:



Pretty neat, right?

Of course table works best with tabular data. If all objects have completely different fields, you will get a table in which most of the cells are undefined. But despite this, everything will look neat, giving you a good overall overview.

Logging objects using console.table

It's nice that console.table works the same way with objects:

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

Nothing to add…

Filter the displayed properties

If you want to display only certain properties, you can list them in the second parameter of console.table:

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

For one property, it is enough to use the string:

 //   console.table(languages, "name"); 

Summarize

I thought I knew most of the Chrome Developer Tools functionality — I was wrong. "Tools" are full of useful things that are just waiting to be used. Seriously, go to the page with official documentation , I'm sure you will definitely find something new for yourself.

From the translator: I hope not alone I did not know about this opportunity. In any case, having rummaged on the habr, I found an awesome article on the topic - FireBug * Console API - the console there was just disassembled by bone ...