Since learning web front-end development, I have been using Document.write () and console.log() for debugging. Today, I found a new use of console object, so I write this document.

The console object

The Console object is a JavaScript native object that can output various information to the console.

The purpose of the console

  • Debug program that displays error messages when web code is running

  • Provides a command line interface for interacting with web page code

Static methods of the console object

Console objects provide static methods for interacting with console Windows

1, the console. The log ()

Used to output information in the console, can receive one or more parameters connected to the output

/ / example: the console. The log ('One parameter'); // Output: one parameter console.log('this is'.'the incoming'.'Multiple arguments'.'Usage'); // Output: This is the use of passing multiple arguments // support placeholder console.log(' %s + %s = %s', 1, 2, 3); Output: 1 + 2 = 3;Copy the code

The following placeholders are supported

%s string %d integer % I integer %f Floating point number % O Link of object %c CSS format character stringCopy the code

Console.log () automatically adds a newline character to the end of each output

The magical use of %c

2, the console. The info ()

Is an alias for console.log() and is used exactly the same way. The only difference between the two is that the console.info() method has a blue icon in front of the output. However, when I use Chrome to debug, there is no blue icon.

/ / case: the console. The info ('Output as console.info()');
Copy the code
3, the console. The debug ()

The usage method is similar to that of console.log(), but generally the output of console.debug() is not displayed. The following is how to set the Chrome browser so that the console can view the output of console.debug()

/ / case: the console. The debug ('Debug using the console.debug() method');
Copy the code

4, the console. Warn ()

Log () is used in the same way as console.log(), except that the console output has a different style. Console.warn () output is preceded by “yellow triangles”, indicating warnings, as follows:

/ / example: console. Warn ('This is the output of the console.warn() method');
Copy the code

5, the console. The error ()

The method used is similar to console.log(); Difference: The console.error() method has a different style of message output on the console. The console.error() message output is preceded by a “red X” and the font color is also red, indicating an error. The specific display style is as follows:

/ / case: the console. The error ('This is output using the console.error() method');
Copy the code

Summary: The console.log() method writes standard output; Console.error () and console.warn() write standard errors

6, the console. The table ()

For some complex types of data, the console.table() method can turn it into a table display

// example: var languages = [{name:'JavaScript',
        fileExtension:'.js'
    },
    {
        name:'php',
        fileExtension:'.php'
     },
     {
         name:'css',
         fileExtension:'.css'
      }
]
console.table(languages);
Copy the code

The output renderings are as follows:

7, the console. The count ()

The console.count() method is used to count how many times it is called

/ / case:function greet(user){
    console.count();
    return 'hi' + user;
}

greet('chen'); // Output: 1 greet('cyq'); // Output: 2 greet('hehe'); 3: The greet() function is called three timesCopy the code

Console.count () can pass in an argument and count the number of calls grouped by the arguments passed in

/ / case:function greet1(user){
   console.count(user);
   return 'hi ' + user;
}
greet1('chen'); // Output: greet1('cyq'); // Output: greet1('chen'); // Output: 2Copy the code
8, the console. Dir ()

Use the console.dir() method to examine an object and display it in a format that is easy to read and print

Example: the console log ({f1:'foo',f2:'bar'});
console.dir({f1:'foo',f2:'bar'});
Copy the code

The output looks like this:

The above output from console.dir() is easier to read and more informative than the output from console.log(), which is often useful for exporting DOm objects.

9, the console. Dirxml ()

The console.dirxml() method is mainly used to display DOM nodes in the form of a directory tree. If the parameter is not a DOM node but a normal JS object, it is the same as the console.dir() method

The specific usage is as follows:

10, the console. The assert ()

The console.assert() method is used to determine the condition when the program is running. If the condition is not met, an error message is displayed without interrupting the program execution. The system prompts the user that the internal status is incorrect.

This function takes two arguments

  • Parameter 1: expression

  • Parameter 2: a string

If the first argument is false, an error message is displayed, and the second argument is printed on the console, otherwise nothing is printed

11, console.time() and console.timeend ()

These two methods are used for timing, so you can calculate the exact time an operation takes. The console.time() method is used to start the timer and console.timeend () is used to end the timer. Their arguments are: the name of the timer

/ / case: the console. Time ('Array initialize');

var array = new Array(100000);
for(leti = array.length-1; i>=0; i--){ array[i] = new Object(); }; console.timeEnd('Array initialize'); // Output: Array initialize: 81.444091796875msCopy the code
12, console.group() and console.groupEnd() and console.groupCollapsed()

Console.group () and console.groupend () are used to group the displayed information. It is only useful for output of large amounts of information, grouped into groups that can be folded/expanded with the mouse.

/ / example: the console) group,'First level grouping');
console.log('Level 1 Grouping content');

console.group('Secondary grouping');
console.log('Content of Level 2 Grouping'); console.groupEnd(); Console. groupEnd(); // End of level 2 groupingCopy the code

The output is as follows:

Console. group collapsed methods are similar to console.group, with the only difference being that the content of an collapsed group collapses rather than unfolds during the first display

/ / case: the console. GroupCollapsed ('First level grouping');
console.log('Level 1 Grouping content');

console.groupCollapsed('Secondary grouping');
console.log('Content of Level 2 Grouping'); console.groupEnd(); Console. groupEnd(); // End of level 2 groupingCopy the code

The renderings are as follows

13.console.trace()

The console.trace method shows the call path of the currently executing code on the stack

/ / case: the console. The trace ()Copy the code

The results are shown below:

14 and the console. The clear ()

The console.clear method clears all output from the current console, placing the cursor back to the first line. The console.clear method will not work if the user selects the Preserve Log option on the console.

/ / case: the console. The clear ();Copy the code

[PS: The test cases shown in this document were all tested in the Chrome environment]

Reference documentation

The console object