console.log()是我们调试代码中常用的一个方法，除此之外，web 标准中，console 是有很多有意思的特性，使用这些特性，可以给你的开发工作增添不一样的颜色。
console 是通过全局对象访问。在 whatwg 的规范中，console 上的方法可以分为4类：Logging、Counting、Grouping、Timing。下面我们就逐个梳理一下。
Logging
console 提供了各种形式的日志输出，包括：log()、info()、warn()、error()、debug()、assert()、table()、dir()、dirxml()、trace()。另外清除控制台日志提供了 clear() 方法。
那么具体我们应该如果选择使用哪种方法打印日志呢？提供如下思路可供参考。
-
打印不同级别的日志方便查找。以 Chrome 为例，如果不勾选 Verbose 选项，则不会显示 debug 级别的日志。
同理，Info、Warnings、Errors也可进行筛选。
-
条件判断打印
在项目中，我们有时会遇到，如果出现某种情况才会打印信息，否则不打印。如果在使用 if-else 没必要的情况下，可以使用 assert() 来做。
assert() 第一个参数为 boolean 类型的值，或者是 Truthy 或 Falsy 的值，只有是 Falsy 的时候，才会打印后面参数对应的数据。例如：console.assert(true, 'hello'); // nothing console.assert(false, 'hello'); // Assertion failed: hello -
对象格式化打印
如果要打印一个 JavaScript 对象，有两种格式化形式：dir() 打印出的对象不会展示各种信息，只表示一个可展开的对象；dirxml() 会尽可能的展示出对象的有用信息。例如：
console.dir({a: 1}) // Object console.dirxml({a: 1}) // {a: 1}通常我们想要查看一个 DOM 对象上的属性和方法，会用 dir()，因为其只会打印出一个可展开的对象，我们点击展开此对象，就能查看具体信息；而使用 dirxml() 打印 DOM 对象，控制台会输出标签的展示形式，这种形式我们只能查看此对象的标签形式。
-
表格形式打印
如果打印的数据可表格化，那么使用 table()，会以 table 的形式展示数据。
如果你的数据格式高度一致且需要进行对照查看，那么表格形式打印出来会非常直观。
-
追踪日志位置
error 级别的日志，会逐级打印出错误信息的位置。那么如果 info 级别的日志如果需要逐级打印日志输出位置，那么就需要 trace() 方法，最终输出效果如下所示：
Counting
Counting 即 计数。如果你以前在调试代码时，有计数的需求，那么可以使用 count() 方法，而不需要去定义额外变量来操作。count() 的使用非常简单，接收一个 string 类型参数（如果不传，默认为 “default”），会生成一个以此参数为名称的计数器，每次调用，则计数器加一，并把结果打印出来。countReset() 接收参数于 count() 一致，即重置指定的计数器。如下例子：
console.count('hello')
// hello: 1
console.count('hello')
// hello: 2
console.countReset('hello')
console.count('hello')
// hello: 1
Timing
Timing 即 计时器，用法和 Counting 的类似。time() 方法接收一个 string 类型的参数（如果不传，默认为 “default”），会生成一个以此参数命名的计时器。使用 timeLog() 可查看指定计时器所计时间，使用 timeEnd() 结束指定计数器。如下例子：
console.time()
console.timeLog()
// default: 8044.06103515625ms
console.timeLog()
// default: 11991.714111328125ms
console.timeEnd()
// default: 16062.8837890625ms
console.timeLog()
// Timer 'default' does not exist
Grouping
Grouping 即 分组。如果想把某些输出分组，这样查看的时候，可以通过折叠展开来查看某一部分的打印信息。group() 和 groupCollapsed() 都是开始一个分组，groupEnd() 结束一个分组；goup() 和 groupCollapsed() 的区别是，一个打印的信息是展开的，一个是折叠的。如下例子：
打印信息特殊标识符
举例介绍一下 console 中的特殊标识符
-
%s 字符串替代
console.log('hello %s, hello', 'world') // hello world, hello -
%d or %i 十进制整数替换
console.log('you have %d apples', 10) // you have 10 apples console.log('you have %i apples', 10) // you have 10 apples -
%f 十进制浮点数替换
console.log('0.1 + %f = 0.3', 0.2) // 0.1 + 0.2 = 0.3 -
%o, %O 分别对应 dirxml() 和 dir() 的对象展示形式
console.log('hello %o world', {a: 1}) // hello {a: 1} world console.log('hello %O world', {a: 1}) // hello Object world -
%c css 样式作用到输出信息
可以通过 css 来改变输出信息的字体、颜色、背景等，具体支持哪些 css，可以参考 MDN。发现可以作用的 css 比较类似于伪元素 ::first-letter。通过这些 css ，你就可以有很大的空间来把你的输出信息变得酷炫。比如我要在控制台打印一只猫：
总结
Console API 为开发者提供了一些方便的功能，比如不同级别日志输出、计数器、计时器等，另外还为日志信息提供了各种展示形式，特别有趣的是还可以作用 css，这可以让你的控制台输出信息变得酷炫有趣。
本文地址：https://blog.csdn.net/weixin_49067499/article/details/107500432
