Advanced JavaScript debugging with console.table ()

Original author: Marius Schulz
  • Transfer
Yesterday I learned about one nifty debugging feature in 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 using 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:

image

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

Array logging using console.table


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

console.table(languages);

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

image

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 cells are undefined. But, despite this, everything will look neat, giving you a good overview.

Logging objects using console.table


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

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

image
Nothing to add…

Filter the displayed properties.


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

// Несколько свойств
console.table(languages, ["name", "paradigm"]);

For a single property, just use the line:

// Одно свойство
console.table(languages, "name");

Summarize


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

From a translator: I hope not only I did not know about this opportunity. In any case, rummaging around in the hub, I found an awesome article on the topic - FireBug * Console API - the console there is just broken down by bones ...

Also popular now: