相信每个 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');如果你做的业务跟图表相关的内容，比如金融基金，也许这个功能对你很有帮助。
