Use console. table () to debug javascript_javascript

Yesterday I learned about a small debugging method of the Chrome debugging tool. During WDCC, MarcusRoss (@ zahlenhelfer) introduced various debugging methods of the chrome debugging tool, which is only one of them, now let's show you. Use CONSOLE. LOG () to display Arrays

Imagine that you have constructed the following Array
Var versions ages = [
{Name: "JavaScript", fileExtension: ". js? 1.1.15 "},
{Name: "TypeScript", fileExtension: ". ts "},
{Name: "CoffeeScript", fileExtension: ". coffee "}
];

console.log(languages);

Console. log () will display the array like this

This presentation is very useful for development, but I found that it is cumbersome to manually click each Object. At this time, I think console. table () is a bit interesting.

Use CONSOLE. TABLE () to display Arrays

Now we can use console. table () to try:

Very small and have wood?

Of course, console. table () is more suitable. Flat columns are made into table format data, and the display is more perfect. If you have no group, if each array element has a different structure, many of your tables are undefined.

Use CONSOLE. TABLE () to display objects

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

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

console.table(languages);

Appropriate.

CONSOLE. TABLE () Filtering

If you want to restrict console. table () to display a column, you can input the following keyword list in the parameter:
// Multiple property keys
Console. table (ages, ["name", "paradigm"]);

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

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

I used to think that I have already understood the vast majority of Functions of Chrome Developer Tools, but now I am clearly wrong. Cool is okay to read the Chrome DevTools documentation!