This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

I believe that most of you are using Console just to use the log method, this article will introduce some of the more interesting gameplay

Gets the block runtime

In daily development, we need to optimize the code block, so how do we know how much space to optimize, in this case, if you can accurately record the running time of the code block, there is a difference between good and bad, let’s take a look at the code

console.time("Execution time");
let count = 0;
for (let i = 0; i < 10000; i++) {
  // Execute the relevant code
  count++;
}
console.timeEnd("Execution time");
Copy the code

Effect:

Personality type

Printing with % C formatting allows you to add custom CSS styles to the printed content

console.log('%c This is custom print content'."background:#286fb9; color:white;")
Copy the code

Effect:

Clear console

Sometimes we encounter A multi-player cooperation scenario, li Lei develops module A, Xiao Ming develops module B, and A Yin develops submodule C. In the development stage, Li Lei, Xiao Ming and A Yin printed a lot of console information respectively (5 pieces each) for debugging, and then continued development after code merging. Oh dear, I don’t want to delete other people’s code when I print out a screen full of information, and I have to find the information I need from the screen full of printed records, which is a crash. Fortunately, A Yin has learned the console.clear() method, and can use the clear method at the beginning of her own development module, so she can continue the development comfortably

console.log("Li lei information: this is the first emmmmmmmmm...");
console.log("Li lei information: this is the second emmmmmmmmm...");
console.log("Li lei information: this is the third article emmmmmmmmm...");
console.log("Li lei information: this is the fourth article emmmmmmmmm...");
console.log("Li lei information: this is the fifth emmmmmmmmm...");
console.log("Xiao Ming information: this is the first emmmmmmmmm...");
console.log("Xiao Ming information: this is the second emmmmmmmmm...");
console.log("Xiao Ming information: this is the third article emmmmmmmmm...");
console.log("Xiao Ming information: this is the fourth article emmmmmmmmm...");
console.log("Xiao Ming information: this is the fifth emmmmmmmmm...");
console.clear();
console.log("O silver information: this is the first emmmmmmmmm...");
console.log("Silver information: this is the second emmmmmmmmm......");
console.log("O silver information: this is the third article emmmmmmmmm...");
console.log("O silver information: this is the fourth article emmmmmmmmm...");
console.log("O silver information: this is the fifth emmmmmmmmm...");
Copy the code

Effect:

Clear record:

After the empty:

Common output

This main types according to the different styles of different command output, reminiscent of the elementUI $message of components, and its similar, with the error | warn | info,

console.error("This is a mistake.");
console.warn("This is a warning.");
console.info("This is a message.");
console.log("Here's a log.");
Copy the code

Effect:

Chrome:

Firefox:

Info print is a little different, firefox has an icon in front, I like this display of Firefox. On Chrome, info is no different than log.

Output Information Grouping

As the name suggests: Multiple outputs can be combined under a single group, which stands for classification

console.group("User Data");
console.log("Data A: 1");
console.log("Data B: 2");
console.groupEnd();// If you don't want subsequent prints to be added to the group, manually call the groupEnd method and declare that the group is over
let a = 1;
console.log("a", a);
Copy the code

Effect:

The summary of this chapter

On the console of a variety of basic use of printing, summary to this, the code is not difficult, usually more use can play out a different console ~~~