Play with the console and see the console usage you don’t know

Time:2021-2-8

preface

As front-end engineers, we can’t do without debugging code with the console every day,console.logIt’s also the most common command we useconsole.logThere are many console methods that can be used. Mastering them can make the information we see on the console more beautiful and accurate, and also greatly improve our development efficiency. Let’s take a look with Xiaosi

Chrome console

Most common browsers have their own console, but Xiaosi is most accustomed to using the chrome console. Open chrome, press F12 for win system, and Command + option + J for MAC system to call out the console. Switch to the console tab to see the following information:
Play with the console and see the console usage you don't know
We can see that Baidu also left us a small egg on the console. I think this egg is also for our programmer classmates. Let’s start with the first command: clear the console.

Clear Console

There are many ways to clear the console in chord

  • inputconsole.clear()Command orclear()command
  • Using shortcut keysControl + JorCommand + K
  • Click the second icon in the upper left corner of the console

Command to display information

console.log ('technology free chat ') // output general information
console.info ('technology free chat ') // output prompt information
console.warn ('technology free chat ') // output warning message
console.error ('technology free chat ') // output error message
console.debug ('technology free chat ') // output debugging information

console.logconsole.infoconsole.debugThese three commands can be understood as one. We only need to use theconsole.logOK, and chrome doesn’t support itconsole.debugOrders.

console.warnThe command outputs a warning message with a yellow warning symbol in front of the message.
console.errorOutput error information, with red error symbol in front of the information, indicating an error, and the stack where the error occurred will be displayed.
The output effect of the previous code on the chrome console is as follows:
Play with the console and see the console usage you don't know

In Safari, the output effect is as follows:
Play with the console and see the console usage you don't know

placeholder

The above commands support the format of printf’s placeholders, which include character (s), integer (D or% I), floating-point number (f) and object (o)

placeholder effect
%s character string
%d or %i integer
%f Floating point number
%o Expandable DOM
%O List the properties of the dom
%c Format the string according to the CSS style provided
//Character (% s)
console.log ("% s", "technology talk freely");
//Integer (% d or% I)
console.log (% d year% d month% d day ", January, June, 2019); 
//Floating point number (% f)
console.log("PI=%f",3.1415926);

The display effect is as follows:
Play with the console and see the console usage you don't know

%o. Both% o are used to output object objects. For ordinary object objects, there is no difference between them, but the printing of DOM nodes is different
Play with the console and see the console usage you don't know

%C is the most commonly used place holder. When using the% C placeholder, the corresponding subsequent parameter must be a CSS statement to render the output content in CSS. There are two common output methods: text style and image output.

Play with the console and see the console usage you don't know

Information grouping

console.group()It is used to group the displayed information, which can be folded and expanded.
console.groupEnd()End inline grouping
Play with the console and see the console usage you don't know

Display the object in a tree structure

console.dir()Can display all the properties and methods of an object
Play with the console and see the console usage you don't know

Displays the contents of a node

console.dirxml()Used to display the HTML / XML code contained in a node of a web page
Play with the console and see the console usage you don't know

Judge whether the variable is true or not

console.assert()Used to determine whether an expression or variable is true,
This method takes two parameters, the first is an expression and the second is a string. Only when the first parameter is false, the second parameter will be output, otherwise there will be no result.
Play with the console and see the console usage you don't know

Timing function

console.time()andconsole.timeEnd()To display the running time of the code

console.time ("console timer");
for(var i = 0; i < 10000; i++){
    for(var j = 0; j < 10000; j++){}       
}
console.timeEnd ("console timer");

Play with the console and see the console usage you don't know

Performance profile

console.profile()andconsole.proileEnd()It is used to analyze the running time of each part of the program and find out the bottleneck.

function All(){
    for(var i = 0; i < 10; i++){
        funcA(100);
    }
    funcB(1000);
}
function funcA(count){
    for(var i = 0; i < count; i++){};
}
function funcB(count){
    for(var i = 0; i < count; i++){};
}
console.profile ("performance analyzer");
All();
console.profileEnd();

Detailed information can be viewed in the “profile” option of the chrome console

console.count () count the number of times the code is executed

function myFunction(){
    console.count ("number of times myfunction was executed");
}
Myfunction(); // number of times myfunction was executed: 1
Myfunction(); // number of times myfunction was executed: 2
Myfunction(); // number of times myfunction is executed: 3

console.table Table display method

Play with the console and see the console usage you don't know

summary

Reasonable use of various methods of console will make our debugging process more enjoyable. That’s all for today’s sharing. Remember to click the bottom right corner to look good!

The technology is unbridled in official account, daily dry cargo, cutting-edge technical knowledge, scanning below two-dimensional code concerns:

Play with the console and see the console usage you don't know