Every JavaScript developer has used console.log(” MSG “).

What else have you used?

Are some big heads? – So many. Let’s get a little bit more concrete, something that we can use in our work.

Of course, if you want to know exactly what these methods are, the website is a good place to look.

This article is based on Google [version 96.0.4664.110 (official version) (ARM64)]

1. log() | info() | debug() | warn() | error

The five methods shown above are all printed messages, and you can pass one or more parameters.

console.log("log");
console.info("info");
console.debug("debug");
console.warn("warn");
console.error("error");
Copy the code

⚠️ If you can’t see console.debug on the console, check console -> All levels -> Verbose

By comparing the effect, can be the log () | info () | debug (), it’s no wonder that use the info (), and the debug () these two methods are less frequency.

After the console.log() style is added, the content displayed on the console is interesting. There are usually job ads and things like that on all the major platforms. Baidu’s web page, for example.

Another example is the website of Jingdong Mall. Yi Yi yi, there is an error, to a programmer worship heaven? Are you kidding? Everyone’s just making a living…

What is there such a site, the reader can explore it.

How do these presentations work?

You just use the % C symbol command and apply the CSS style. As follows:

console.log("% C red text, 14 point bold"."color: red; font-size: 14px; font-weight: bolder;")
Copy the code

Well, we know the principle, together to achieve the effect of baidu site:

let arr = ['Every planet has a drive core,'.'Every thought has its seed of influence. '.'Feel the temperature of the world,'.'You can change the world when you're young,'.'Baidu cherishes all your potential. '.Your potential is what makes the world change. '];
let str = (arr.map(item= > item+'\n')).join(' ');
console.log(`%c${str}`.'color: #333; ');
console.log('% % c baidu 2022 campus recruitment resume: chttps://talent.baidu.com/external/baidu/campus.html'.'color: #f00; '.'color: #333; ');
Copy the code

Interested readers can go to Baidu console to compare the effect. Well, these console job postings look cool, but you can do even cooler ones, like this one:

Function.prototype.makeMulti = function () {
  let l = new String(this)
  l = l.substring(l.indexOf("/ *") + 3, l.lastIndexOf("* /"))
  return l
}
let string = function () {
        / * _ __ __ __ _____ ______ | | / / \ \ / / / ___ | | ___ / | | __ / / \ \ / / | | / / | | | / /} {| | _ / / | | | / / / / / \ \ | | _ | | / / __ | / | ___ ___ / / _ \ _ \ \ / / | * / _____ _____
}
if (window.console) {
console.log(string.makeMulti());
console.log("Welcome to the % C invalid Work % C demo area"."color:red; font-weight:bold;"."");
}
Copy the code

The invalid working string generated above ⚠️, which you can obtain by site character generation line word.

Well ~

But using console.log() in a production environment is, to put it mildly, a product polish, but a chicken.

Anyway, back to the point

2. table()

Console.table () is used to display array or object data.

let arr = [{ 
    firstName: 'John'.lastName: 'Doe'.age: 2 
   }, 
   { 
    firstName: 'William'.lastName: 'Shakespeare'.age: 3 
    }];
console.table(arr);
Copy the code

Of course, you can also specify which columns to show, such as just showing firstName and lastName data from 👆 above.

let arr = [{ 
    firstName: 'John'.lastName: 'Doe'.age: 2 
   }, 
   { 
    firstName: 'William'.lastName: 'Shakespeare'.age: 3 
    }];
console.table(arr, ['firstName'.'lastName']);
Copy the code

Of course, when arrays or objects are nested, the display is not ideal, as in:

let obj = {
  name: "jimmy".children: {
    name: "neo"}};console.table(obj);
Copy the code

The layer of data, console.table(), is visually better than console.log().

⚠️ syntax console.table(data [, columns])

3. The group () and groupEnd ()

Use grouping to have more hierarchical control over your data. The previous table() was very poor at handling multilevel functionality. So many levels of data can be considered in the following way.

console.group();

  console.log("Level 1");
  console.group();
    console.log(Level 1 - "1");
    console.log(Level 1-2 "");
  console.groupEnd();
  
  console.log("Level 2");
  console.group();
    console.log(Level 2-1 "");
  console.groupEnd();
  
console.groupEnd();
Copy the code

This is a bit like OL ordered or UL unordered lists in HTML.

B: well… When managing permissions or viewing multi-layer data formats, this log method is more friendly for data comparison.

For other scenarios, console.log() works.

4. Time () and timeEnd ()

Check the performance of your code.

console.time('Time')
let count = 0;
for(let i = 0; i < 100; i++) {
    count += i;
}
console.log("total: ", count);
console.timeEnd('Time');
Copy the code

If you’re in the business of charting, such as financial funds, this might be helpful.

Thanks for reading