JavaScript debugging console.table()

Yesterday I learned about a small debugging method of the Chrome debugging tool. During WDCC, Marcus Ross (@zahlenhelfer) introduced various debugging methods of the Chrome debugging tool. This is just one of them. Now let me show it to you.

Use CONSOLE.LOG() to display the array

Imagine you constructed the following array

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

console.log() will display the array like this

This kind of display format is very useful for development, but I find it a bit cumbersome to manually click on each Object. At this time, I think console.table() is a bit interesting.

Use CONSOLE.TABLE() to display arrays

Now let’s try using console.table():

Very small and wooden have?

Of course, console.table() is more suitable. The data is flatly listed in table format and displayed more perfectly. Otherwise, if each array element has a different structure, many grids in your table will be undefined.

Use CONSOLE.TABLE() to display object

Another feature of console.table() is to display object.

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

console.table(languages);

Properly.

Filtering function of CONSOLE.TABLE()

If you want to limit console.table() to display a certain column, you can pass in the keyword list in the parameter as follows:

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

If you want to access a property, one parameter is enough,

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

I once thought that I had understood most of the functions of Chrome developer tools, but now I am obviously wrong, Sao Nian If you have nothing to do, check out the Chrome DevTools documentation!

Related learning recommendations: javascript video tutorial

The above is the detailed content of JavaScript debugging console.table(). For more information, please follow other related articles on the PHP Chinese website!