JavaScript console 四个实用功能

[reng99]

相信每个 JavaScript 开发者 都使用过 console.log("msg")。

除此之外，你还使用过哪些？

是不是有些头大 - 这么多。我们来点实在点的，在我们工作中能够用到的知识点。

当然，你很想弄清楚这些方法具体是什么，查阅官网是个不错的选择。

本文章基于谷歌【版本 96.0.4664.110（正式版本） (arm64)】讲解

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

上面展示的五个方法，都是打印信息，你可以传一个或者多个参数。

console.log("log");
console.info("info");
console.debug("debug");
console.warn("warn");
console.error("error");

⚠️ 如果你在控制台上看不到 console.debug 的内容，请勾选 Console -> All levels -> Verbose

通过比对效果，可以将log() | info() | debug()归类，这也难怪使用info()和debug()这两个方法的频率少。

console.log() 加入样式之后，在控制台上展示的内容比较有意思。通常会在各大平台系统上加入招聘广告之类的内容。比如百度的网页。

又比如京东商城的网页。咦咦咦，有报错，来个程序员祭天？开玩笑，大家都是混口饭吃而已...

还有啥这样的站点，读者可以自己去探索一下。

这些展示是怎么实现的呢？

其实就是使用 %c 符号命令，应用 CSS 样式。如下：

console.log("%c 红色的文本， 14号粗字体", "color: red; font-size: 14px; font-weight: bolder;")

好了，我们知道原理了，一起来实现下百度站点的效果：

let arr = ['每一个星球都有一个驱动核心，', '每一种思想都有影响力的种子。', '感受世界的温度，', '年轻的你也能成为改变世界的动力，', '百度珍惜你所有的潜力。', '你的潜力，是改变世界的动力！'];
let str = (arr.map(item => item+'\n')).join('');
console.log(`%c${str}`, 'color: #333;');
console.log('%c百度2022校园招聘简历投递：%chttps://talent.baidu.com/external/baidu/campus.html', 'color: #f00;', 'color: #333;');

感兴趣的读者可以到百度控制台上比对一下效果。嗯，这些控制台招聘信息，看起来有些酷，你还可以实现更酷的，比如下面这个：

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("欢迎来到%c无效工作%c演示区", "color:red;font-weight:bold;", "");
}

⚠️ 上面生成的 无效工作 的字符串，你可以通过站点 字符生成线条字 来获取。

嗯～

可是使用 console.log() 在生产环境上，说好听点，是产品打磨，但是 鸡肋。

扯远了～ 回归正题

2. table()

console.table() 用来展示数组或对象的数据。

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

当然，你还可以指定展示哪些列，比如只是展示上面👆的 firstName 和 lastName 数据。

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

当然，当数组或者对象进行嵌套的时候，展示的效果就不理想了，比如：

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

在视觉呈现上，一层数据，console.table() 比 console.log() 要佳。

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

3. group() 和 groupEnd()

使用分组功能，对你的数据更加有层级掌控。刚才的 table() 处理多层级功能的时候处理能力很差。那么多层级的数据可以考虑以下面的方式呈现。

console.group();

  console.log("层级1");
  console.group();
    console.log("层级1-1");
    console.log("层级1-2");
  console.groupEnd();
  
  console.log("层级2");
  console.group();
    console.log("层级2-1");
  console.groupEnd();
  
console.groupEnd();

这有点像 HTML 中的 ol有序 或 ul无序列表。

嗯...在权限管理或者查看多层数据格式的时候，这个打日志的方式还是比较友好地进行数据比对的。

至于其他的场景应用，还是 console.log() 好用。

4. time() 和 timeEnd()

检查你代码运行的性能。

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

如果你做的业务跟图表相关的内容，比如金融基金，也许这个功能对你很有帮助。

【完】感谢阅读～