1 Introduction
This week's intensive article is Mastering JS console.log like a Pro , let's get to know the console more comprehensively!
2 Overview & Intensive Reading
The main function of console is console printing, which can print any characters, objects, even DOM elements and system information, which will be introduced one by one below.
console.log( ) | info( ) | debug( ) | warn( ) | error( )
Print characters directly, the difference lies in the display form:
The new version of the chrome console can classify the printed information:
log()info()Corresponds to info, warn()corresponds to warnings, error()corresponds to errors, and debug()corresponds to verbose, so it is recommended to use appropriate printing habits in appropriate scenarios, so that you can also filter in a targeted manner when troubleshooting.
For example, debugging information can be output console.debugonly in the debugging environment, even if the debugger turns on the debugging parameter, it will not affect infothe normal view, because the debugging information is output verbosein .
use placeholders
-
%o — object
-
%s — string
-
%d — number
Values of different types can be inserted in a row via placeholders as follows:
Add CSS styles
-
%c - style
It can be concluded that the console supports the output of complex content, and its output capability is comparable to HTML, but the input capability is too weak, only strings, so the design pattern of placeholder + multi-input parameter modification is used to solve this problem.
console.dir()
Output in JSON Schema. The author also adds a sentence here: console.log()it will automatically judge the type, if the content is a DOM attribute, it will output a DOM tree, but console.dirit will forced to output in JSON mode, and it can be converted to JSON output when used in DOM objects.
output HTML element
Output according to HTML ELements structure:
This output structure is consistent with the printing form of Elements, and can be used if you want to see detailed properties console.dir().
console.table
Printing a table on the console is a function enhancement. Although only text can also print out beautiful tables on the console, the browser debugging console is more powerful, which is console.tablejust a manifestation of its rich text capabilities.
console.group( ) & console.groupEnd( )
Next is another rich text capability, output by group:
This kind of API with side effects is obviously designed for easy reading. However, in the scenario where a large amount of dynamic structured data needs to be output, structure conversion is also required, which is a troublesome place.
console.count( )
count()Used to print the number of calls, generally used in loop or recursive functions. Receive a labelparameter to customize the output, and the default is to output 1 2 3numbers directly.
console.assert( )
consoleVersion of the assertion tool that prints the second argument as output if and only if the value of the first argument falseis .
This output is an error, so it can also be console.errorreplaced by a + code-level assertion.
console.trace( )
Print the call stack at this time, which is very useful when printing auxiliary debugging information.
console.time( )
Printing code execution time, performance optimization and monitoring scenarios are more common.
console.memory
Print memory usage.
console.clear( )
Clear console output.