浏览器 API 之 — Console API

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() 方法。

那么具体我们应该如果选择使用哪种方法打印日志呢？提供如下思路可供参考。

1. 打印不同级别的日志方便查找。以 Chrome 为例，如果不勾选 Verbose 选项，则不会显示 debug 级别的日志。
   
   同理，Info、Warnings、Errors也可进行筛选。

2. 条件判断打印

   在项目中，我们有时会遇到，如果出现某种情况才会打印信息，否则不打印。如果在使用 if-else 没必要的情况下，可以使用 assert() 来做。
   assert() 第一个参数为 boolean 类型的值，或者是 Truthy 或 Falsy 的值，只有是 Falsy 的时候，才会打印后面参数对应的数据。例如：

   console.assert(true, 'hello'); // nothing
   
   console.assert(false, 'hello');
   // Assertion failed: hello
   

3. 对象格式化打印

   如果要打印一个 JavaScript 对象，有两种格式化形式：dir() 打印出的对象不会展示各种信息，只表示一个可展开的对象；dirxml() 会尽可能的展示出对象的有用信息。例如：

   console.dir({a: 1})
   // Object
   
   console.dirxml({a: 1})
   // {a: 1}
   

   通常我们想要查看一个 DOM 对象上的属性和方法，会用 dir()，因为其只会打印出一个可展开的对象，我们点击展开此对象，就能查看具体信息；而使用 dirxml() 打印 DOM 对象，控制台会输出标签的展示形式，这种形式我们只能查看此对象的标签形式。

4. 表格形式打印

   如果打印的数据可表格化，那么使用 table()，会以 table 的形式展示数据。
   
   如果你的数据格式高度一致且需要进行对照查看，那么表格形式打印出来会非常直观。

5. 追踪日志位置

   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