Elegant usage of console. log()&summary of other convenient console.xx()

This article is reproduced from: qiita - JavaScript でいい console.log() enables いそそななで console.xxx() to enable いとめ (dir ・ table ・ warn ・ group とか) "Has been approved by the author.

About this article

I like JavaScript very much.

After learning the console. log() of JavaScript, I found that there are several ways to use it. In addition to console. log(), JS also has a variety of console. xx debugging methods.

I learned and summarized some usage of them.

Elegant console. log() usage

Suppose there are three objects.

 const foo = { name: "momoko", age: 29 }; const bar = { name: "takeshi", age: 34 }; const baz = { name: "saori", age: 15 };

Deprecated usage

 // Bad :( console.log("↓ Bad :("); console.log(foo); console.log(bar); console.log(baz);

In this way, the corresponding variable name will not be displayed, and it is difficult to understand which is which.
And this writing method requires several lines of console. log(), which is very troublesome.

Elegant usage

Put objects in like this console.log() Medium.

 // Good :) console.log("↓ Good :)"); console.log({foo, bar, baz});

This writing method not only reduces the number of lines of code, but also can instantly understand which variable refers to which data, which is very useful.

Use CSS style in console. log()

If the data of console.log is very important and needs to be conspicuous, "% c+string" and "CSS code" can apply CSS style to console.log.

 // Good :) console.log("↓ Good :)"); Console.log ("% c お Youda!", "color: red; font weight: bold"); console.log({foo, bar, baz});

Console. table() is very convenient for displaying data tables

These objects have the same properties, so you can use console. table () to display them as a table.

 console.table([ foo, bar, baz ]);

This looks beautiful! Console.table is very useful when you need to view the object array in console.log.

Use console. dir() to view the details of DOM

Console. dir () and console. log () look similar, but you can see the difference when the parameter is element.

 let element = document.getElementById('test'); console.log("↓console.log()だとこうなるよ"); console.log(element); console.dir("↓console.dir()だとこうなるよ"); console.dir(element);

Console. log (element) outputs the specified DOM itself, and console. dir (element) outputs the detailed contents of the specified DOM.

Use console. warn() to output orange warnings

When viewing the console, you can see the orange console output at a glance. Console. warn () is used here.

 let element = document.getElementById('test'); Console. warn ("おがかゆい"); console.warn(element);

Console. warn is very convenient when you want to attract attention.

And console. assert()

The working principle of console. assert() is very similar to that of console. log().
The difference is that only when the result of the first parameter of console.assert is "false", the second parameter is log().

 //If false, log is returned console.assert(document.getElementById("demo"), "'demo'というIDはありません");  //True does not return log console.assert(document.getElementById("test"), "'test'というIDはありません");

Don't forget console. count()

If you need to use counter output, it is recommended to use console. count ().

 for (i = 0;  i < 10; i++) { console.count(); }

Use console. trace() in callback

When you want to know where the callback is called, console. trace() is very convenient!

 function foo() { function bar() { console.trace(); } bar(); } foo();

Timer console. time() and console. timeEnd()

Use console. time() and console. timeEnd() to output the time interval between them.

 function foo() { function bar() { console.time(); Console.log ("Ta イマーー Start"); console.trace(); } bar(); } foo(); console.timeEnd(); Console.log ("The end of the tower");

Use console. clear() to clear the console

The function of console. clear() is very simple. It will clear the information in the console once.

 function foo() { function bar() { Console.log ("Start"); Console.log ("いいなぁ"); } bar(); console.clear(); } foo(); Console. log ("end");

Console was cleared!

If you want to group, use console. group()!

If you want to do more in-depth, complex and advanced things with advanced JavaScript, you may want to use console. group().
It can nest and display data.

 let number = 1; Console. group ('loop no external protocol '); console.log(number); Console. group ('Loop 「); for (let i = 0;  i < 5; i++) { number = i + number; console.log(number); } console.groupEnd(); console.log(number); console.groupEnd(); console.log('おわり');

You might think that although this thing looks like it's better than others, how can I use it? Here is an example:

 class momoClass { constructor(dataAccess) { console.group('データタイプチェック'); Console.log ('Result '); console.assert(typeof dataAccess === 'object', 'false false false false false false false false false false false false false false false false false false false false false false'); this.initializeEvents(); console.groupEnd(); } initializeEvents() { console.group('イベント'); Console.log ('In motion '); console.groupEnd(); } } let myClass = new momoClass(false);

Enter and execute this code, console. log() will shake your tiger! ha-ha.

summary

I have been using console. log() before. I didn't expect that there are so many console.xx methods. I learned them!

Reprint permission

Please ignore the trivet English.