Usage of console in JavaScript

When debugging JS code, many people tend to use the alert () or Console.log () method to output information, just as some Java programmers prefer to use SYSTEM.OUT.PRINTLN () output information when debugging code. But unlike the Java output, the console object has several ways to better present the information, which facilitates code debugging. Depending on the level of popularity, the following methods of console objects are listed:

• Console.log ()

• Console.debug (),console.info (), Console.warn () and Console.error ()

• Console.table ()

• Console.time () and Console.timeend ()

• Console.assert ()

• Console.count ()

• Console.group, Console.groupend () and console.groupcollapsed ()

• Console.dir ()

The following example is a running environment for Chrome 53.

Console.log ()

Let's first talk about the Console.log () method that we are most familiar with and most commonly used.

Our most common practice is to use it to output a variable or to output a string. such as the following:

console.log("Hello China!");const str = "Hello world!";console.log(str);

The results of the operation are as follows:

Hello China!Hello world!

But we can also use Console.log ():

// 代码段 1const str1 = "hello";const str2 = "world";console.log(str1, str2);// 代码段 2console.log("%d年%d月%d日", 2015, 09, 22);

The console will output:

hello world2015年9月22日

Code Snippet 1 shows that the parameters of Console.log () can have more than one, and the result of the output is separated by a space.

Code Snippet 2 shows that Console.log () can use C-language printf ()-style placeholders, but it supports fewer placeholders, only strings (%s), integers (%d or%i), floating-point numbers (%f), and Objects (%o).

Console.debug (),Console.info (), Console.warn () and Console.error ()

These four methods are used in the same way as Console.log (), except that the color of the output is different from the icon. Here's an example:

console.log("log");console.debug("debug");console.info("info");console.warn("warn");console.error("error");

The results of the operation are as follows:

Console.table ()

Let's look at one of the following variables:

ConstPeople= { "Person1" : {: " san "" lname ":  "Zhang" },  "Person2" : { "FName"  "si"  "lname" :  "li" },  "Person3" : { "FName"  "WU"  "lname" :  "Wang" }};           

We use Console.log () to output it in the Chrome console:

Then use the console.table () output:

So from the above two outputs we can see that when the output is similar to this two-level nested object, we can choose console.table () to output in tabular form. Of course, nested layer three and above will also be output in tabular form, but the table can only display the characteristics of two-dimensional information, it will be nested three or more places will display the "Object" string.

Console.time () and Console.timeend ()

When debugging, we often need to know a piece of code execution time, we can use these two lines of code to implement. Look at the following section of code:

Console.Time (arr = []; For (let i = 0i < 100000i++) {arr.< Span class= "NX" >push ({ "key" : i }); }console. Timeend (        

The output is:

for-test: 16.030ms // Chrome 这优化做的，版本 43 中的时间是：176.152ms

As can be seen from the above example, we use Console.time () and Console.timeend () to surround the code to test the run time, and the parameters of the two methods are consistent to correctly identify and match where the code starts and ends.

Console.assert ()

Console.assert () is similar to assertions in unit tests, and outputs an error message when the expression is false. Examples are as follows:

const arr = [1, 2, 3];console.assert(arr.length === 4);

The output results are as follows:

Console.count ()

When debugging code, we often need to know how many times a piece of code has been executed, and we can use Console.count () to make it easy for us to achieve our goal. Examples are as follows:

function func() {    console.count("label");}for(let i = 0; i < 3; i++) { func();}

The result of the operation is:

label: 1label: 2label: 3

Console.group (), Console.groupend () and console.groupcollapsed ()

The output of the general Console.log () method does not have a hierarchical relationship, it is weak in the output that requires some display hierarchy, and the use of console.group () can achieve our goal. The sample code is as follows:

Console.Group("1");Console.Log("1-1");Console.Log("1-2");Consolelog (. Groupend. Group ( "2" . Log (. Log (. Log (. Groupend ()               

The result of the operation is:

To replace "group" with "groupcollapsed", the default is to collapse the run result.

Console.dir ()

Console.dir () What's the work? The MDN says this method is to display a specific JS object as a list that can be interacted with, and the list is folded up. So it's a little abstract, look at the effects of my output from the Chrome console:

As you can see, the results from the Console.dir () output are completely folded, so you can understand why I'm not using the Console.dir () method. Then I tested it again with Firefox:

No wonder there are small partners like this method, originally in the Firefox console, Console.dir () can display a collapsed object as a clear navigation tree.

Look at one more comparison:

Written here can be said that if the development in the Chrome environment, if the output of general objects, the recommended use of Console.log (), and in the FIREFOX environment, want to clearly display an object, Console.dir () is more recommended.

For Chrome users, is Console.dir () useless? However not, look at the picture:

When you print DOM elements in Chrome, the results of the two method outputs are very different. Console.log () outputs DOM elements as HTML, while Console.dir () outputs as JSON objects.

Now, are you going to use Console.dir ()?

Usage of console in JavaScript