原文首发：公众号「极客阅读号」mp.weixin.qq.com/s/aFJ4CHMr-…
「视频」见公众号文章
文字版：
console 是浏览器内置的调试器，作为前端开发对它应该并不陌生，运行 console.log(console) 时，你会发现它提供比你想象的多的方法。
错误（false）断言
通过 console.assert() 可以将条件为 false 时的 log 打印出来，例如：console.assert(false, 'user not logged in 😷');
将数据以表格的形式显示
该方法可以将数据以表格的方式更加直观的展示出来。
这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。
分组（group）输出
在循环或定时器中不断输入内容，真的很糟糕。
通过 console.group() 将输出分组，随后输出到控制台上的内容都会被添加一个缩进，表示该内容属于当前分组，直到调用 console.groupEnd()之后,当前分组结束。
显示指定 JavaScript 对象的属性
在控制台中显示指定 JavaScript 对象的属性，并通过类似文件树样式的交互列表显示。
在 Chrome 中通过 console.log 也能显示类似的结果。
计数统计
对于有需要做计数统计的工作可以使用 console.count() 完成，此函数接受一个可选参数 label。
性能调试 - 计时器
当需要查看一段代码运行时间时，可以通过 console.time() 来实现。它会启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
堆栈跟踪
通过 console.trace() 展示运行到该 console.trace() 所经过的调用路径。
提示：从下至上查看调用路径
不单调的 console.log 🌈
通过 CSS 改变输出样式。
console.log('%c JavaScript is beautiful 🌈', 'color: pink; background-color: black; padding: 10px; font-weight: bold')
注意：
%c和第二个参数对样式的设置。
以上就是视频中提到的 console 技巧。注意 console 主要用于代码的调试，生产环境上建议将 console 相关代码删除。
— 完 —
极客阅读 | 汇聚了国内外最优质的技术博客、产品动态、公众号文章。
