作者 / 以码为梯

排版 / 以码为梯

文章字数 / 1779

如果你开发过前端应用，那么你对console.log()这个方法应该很熟悉，这个方法可以在开发者工具控制台打印数据，通常用于记录日志，测试代码或定位问题。

如果执行console.log(console)，你会发现console对象有很多方法。

在这篇文章中，我们主要简要描述可以用于提升日志记录体验的十大巧妙技巧。

Tables

console.tables方法将数据以表格的形式打印在控制台上。

Groups（分组）

使用console.group方法将相关联的信息分组打印，并提供折叠功能。可以在group方法中传递一个字符串参数作为分组的标题。在控制台可以对信息分组进行展开和收缩，但是使用groupCollapsed方法可以默认将分组折叠。分组之间可以嵌套，但是需要记住用groupEnd来关闭分组。

Styled Logs（格式化日志）

可以给打印的内容加上一些基本的CSS样式，包括颜色，字体，字体大小等。

Timer（计时器）

在实际开发过程中为了确认一个方法的执行效率，通常都是通过计算方法的执行时长来确认。一般采用的方法都是在方法开始时记录一个时间（当前时间），在方法执行结束之后再记录一个时间（当前时间），那么方法执行的时长就是结束时间-开始时间。

使用console中的time方法可以很容易实现这个功能。用console.time()表示开始，console.timeEnd()表示结束，两个方法接收相同的字符串作为标签即可。

对类似的for循环的或者执行步骤很长的方法也可以通过console.timeLog()来记录从开始到此步骤的时间。

Assert（断言）

有时你可能只想在错误发生或者特定情况下才在控制台打印信息，这时候可以采用console.assert()方法。该方法的第一个参数是条件检查，最后一个参数为打印的信息，只有在第一个参数返回的值为false时才会在控制台打印信息。

// 将会打印信息，因为第一个参数为false。
console.assert(false, 'Value was false') 

Count（计数器）

console.count()在记录某个操作的执行次数或者进入某个方法的次数有很大帮助，该方法接收一个参数作为计数器的标签（默认的标签为default），这样在多个计数器的情况可以很清晰的显示多个计数器。计数器从1开始递增，调用console.countReset()可以重置计数器，该方法传递一个字符串可以重置指定计数器。

Trace

在实际的开发中，可能会遇到层次很深的调用栈，通过console.trace()可以遍历调用栈并输出。

Log Levels（日志级别）

可能你注意到在浏览器的控制台上有过滤功能，如下图所示。那么在使用console时也可以输出不同级别的日志。分别有console.debug、console.info、console.warn、console.error。其中console.debug在打包时会被很多打包工具忽略。

Multi-Value Logs

console对象上的大部分函数都是接收多个参数，因此你可以为你的打印信息添加标签或者一次打印多个信息。参数也可以跟对象的析构结合输出。

Log String Formats

如果需要构建格式化字符串以进行输出，可以使用 C 语言风格的格式说明符 printf 来完成此操作。

• %s：字符串或任何可以转换为字符串的类型
• %d/%i：整型
• %f：浮点型
• %o：最佳格式化
• %0：默认格式化
• %c：自定义格式

Clear

清除控制台的之前的打印日志

Special Browser Methods

当在浏览器的控制台直接运行代码时，你可以快捷方法，这些方法对调试、自动化和脚本都很有帮助。

• $()：Document.querySelector()的简写（DOM选择器）
• $()：跟上面的类似，以数组的方式返回多个
• $_：返回最后计算的表达式的值
• $0：返回最近选中的DOM元素（）
• $1…$4：抓取之前选取的元素
• $x()：使用Xpath选择DOM元素
• keys()和values()：Object.getKeys()的简写，将返回对象键或值的数组
• copy()：将内容复制到剪贴板
• monitorEvents()：指定元素在发生事件时进行记录
• 对于一些特定的console方法可以省略console，例如console.table()可以简写为tables

一些最佳实践

• 定义一个lint规则，防止任何console.log语句被合并到你的主分支。
• 编写一个封装函数来处理日志，这样可以根据环境来控制是否开启调试日志以及使用合适的日志级别并对日志进行任何的样式处理。这样在集成第三方日志日志服务时只需要修改封装的方法即可。
• 永远不要在日志中记录敏感信息，浏览器扩展程序可以捕获到浏览器日志信息。
• 使用正确的日志级别，这样可以使过滤更方便。
• 使用一致的日志格式，以便后续日志可以被机器解析。
• 在日志中包含上下文或者类别。
• 不要过度使用日志，日志中仅仅记录有用信息。

如果觉得文章对你有帮助，记得关注我，并转发，分享该文章，让更多的人看到这篇文章。