Asynchronous JavaScript with async/await

In this course we will learn how to use the ES2017 async and await keywords to write asynchronous code that is more readable and easier to follow than equivalent code based on long promise chains or deeply nested callbacks.

Watch the Course

Advanced JavaScript Debugging with console.table()

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:

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

console.log(languages);

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

Console Output for console.log

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:

Console Output for console.table()

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

Console Output for console.table() (sorted)

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:

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

console.table(languages);

Console Output for console.table() called with an object

'nuff said.

Filtering the Displayed Object Properties

If you want to restrict the columns to certain properties, you can pass an array of their keys as a second parameter to the console.table() call:

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

For a single property, a simple string is sufficient:

// A single property key
console.table(languages, "name");

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:

Learn Node