This is the 10th day of my participation in the August More Text Challenge

preface

After “Can you Really Use Chrome – Command”, let’s take a look at what Console has in store for me. Console is a lot more popular than Command. Console.log () is a front end. Well, have you noticed that console is a big family when you use console? !

A member of the Console family

The output message: the console. The info/error/warn/debug

In addition to console.log, which we use most often, there are error, WARN, INFO, and DEBUG methods for sending messages to the console. Each result has a different style in the log, making it easier for developers to identify the message level. Info and debug look similar to logs, right? During development, it can be selected according to actual scenarios.

console.error('this is an error log')
console.warn('this is a warn log')
console.log('this is a normal log')
console.info('this is an info log')
console.debug('this is a debug log')
Copy the code

Output result:

The log filtering function is displayed on the left of the console panel to filter out interested logs.

Output object: console.dir

Use to print all properties and property values of an object in the console and display them in a tree structure. When printing normal JS objects, console.dir behaves like console.log; Console. dir gives you a clearer view of the DOM object’s properties when printing it:

Asserts that the console. Assert

An assertion of false writes an error message to the console (but does not interrupt the execution of the code). If the assertion is true, nothing is printed.

Note: For versions of Node prior to V10.0.0, asserting false causes an AssertionError to be thrown, interrupting code execution. V10.0.0 fixes this difference.

Example:

// Even assertion
const errorMsg = 'the # is not even';
for (let number = 2; number <= 5; number += 1) {
    console.log('the # is ' + number);
    console.assert(number % 2= = =0, {number, errorMsg});
}
Copy the code

Output result:

CP combination 1 — Timer: console.time & conosle. TimeEnd

Console. time and conosle. TimeEnd are used in pairs, and the time CP combination is an option when you need to test code execution times.

For example, to test the efficiency of executing for and while loops:

let i;
console.time("For loop test");
for (i = 0; i < 100000; i++) {
  // 
}
console.timeEnd("For loop test");
 
i = 0;
console.time("While loop test");
while (i < 1000000) {
  i++
}
console.timeEnd("While loop test");
Copy the code

Output: Well, the for loop works better than the while loop

CP combination 2 — Performance analysis: console.profile & Conosle. ProfileEnd

Console. time is fine if you need to know the execution time of a piece of code, but for code with more complex logic, it might not be elegant to plug in a lot of console.time for analysis. Console also provides another set of CPS: console.profile & Conosle. ProfileEnd, which can be used to analyze the elapsed time of each part of the code to make it easier to identify bottlenecks.

function doTask(){
    doSubTaskA(1000);
    doSubTaskB(10000);
    doSubTaskC(1000.10000);
}
function doSubTaskA(count){
    for(let i=0; i<count; i++){} }function doSubTaskB(count){
    for(let i=0; i<count; i++){} }function doSubTaskC(countX,countY){
    for(let i=0; i<countX; i++){for(let j=0; j<countY; j++){} } }console.profile('TEST_1');
doTask();
console.profileEnd('TEST_1');
Copy the code

Results: From the analysis panel, we can see that the most time-consuming task in the program execution is doSubTaskC, which takes 188.5 ms, accounting for 92.31% of the total time.

What? You don’t have a Profile panel, don’t know where to look? Ctrl + Shrif + P, input profile, here it is

CP group 3 — Group output: console.group & conosle. GroupEnd

Console. group and conosle. GroupEnd are used in pairs to group output information. Console. group defines the starting position, after which all information is written to the group; Conosle. GroupEnd defines the end position after which no more groups are written.

console.log('This is the output out of the group')
console.group('Let's start grouping here.')
console.log('Information within groups 1111111111')
console.log('Information within groups 222222222222')
console.log('Information within a group 333333333333')
console.groupEnd('End the grouping here')
console.log('This is the output out of the group')
Copy the code

Output result:

---

All right, that’s it for today. The Console family is too big to say it all at once, so tomorrow we’ll get to know the more flamboyant members of the Console family.