console.log 优雅指南

所有做过前端项目的同学都有在浏览器控制台打印消息的经历，相信你们中的大部分都和我一样，习惯用 console.log 调试代码，所谓一招鲜吃遍天。

《鬼灭之刃》中，我妻善逸只会雷之呼吸一之型，把一之型练到了极致中的极致，练成了只属于我妻的独特雷之呼吸。但是调试代码可不一样，console.log 再怎么极致，也就打印的漂亮点罢了。

因此，还是把 console API 的所有型都学会，才能事半功倍，获得快速便捷的调试体验。

基本型 console.log() | info() | debug() | warn() | error()

基本的 console API 都是在控制台输出一条语义化的信息。

Log 和 Info 代表一条普通日志信息，唯一区别是在 Firefox 浏览器里，info 会在旁边显示一个小 i 图标。

Debug 代表一条调试信息，一般不显示，需要在控制台过滤选项里选上 verbose 级别的信息。

Warn 代表一条警告信息。

Error 代表一条错误信息，在 Firefox 浏览器里有个别称，叫 exception。

基本型的高级用法

基本型还有 2 种高级的用法，占位符和添加样式。

首先是占位符，有 4 种可以选择：

• %o 代表一个对象
• %s 代表一个字符串
• %d 代表一个整数
• %f 代表一个浮点数

添加样式，个性化你的控制台吧！打印的信息里需要更变样式的部分以 %c 开头，接下来的参数填入对应样式。

聪明机智的你可能已经发现，控制台的样式其实就是写 CSS。

进阶型

下面是一些进阶的 console API，他们一定能够升级你的调试体验，提高你的调试逼格，提升你的调试速度。如果不行，你找我。

Console API trace

在控制台输出调用堆栈信息。

如果你有一个函数被触发，但是你不知道是哪里触发这个函数，这时候 trace 就很有帮助了。

Console API time & timeEnd

想要测试一段代码的执行时间，你可能会这样写：

但是现在再也不用那么麻烦了：

Console API table

以表格的形式打印对象或者数组，这在需要横向对比对象或者数组中的数据时很有用：

Console API count

一个用于计数的 API，会在控制台打印出调用自己的次数，接收一个参数作为打印结果的前缀，默认为 default：

Console API group

用来为日志分组，同样接收一个参数，用来表示组名，默认为 console.group：

Console API assert

断言，接收 2 个参数，第一个是表达式，第二个是标识名称，当表达式值为 false 时表示断言失败并打印日志，否则什么也不会发生：

Console API clear

这个就厉害了，清除所有控制台的日志。

恭喜你完成了从 console.log 到 console.love 的过渡，打印 log 也是一种艺术。

最后推荐一个网站：console.❤