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