欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浏览器 API 之 — Console API

程序员文章站 2022-06-28 19:15:55
console.log()是我们调试代码中常用的一个方法,除此之外,web 标准中,console 是有很多有意思的特性,使用这些特性,可以给你的开发工作增添不一样的颜色。console 是通过全局对象访问。在 whatwg 的规范中,console 上的方法可以分为4类:Logging、Counting、Grouping、Timing。下面我们就逐个梳理一下。Loggingconsole 提供了各种形式的日志输出,包括:log()、info()、warn()、error()、debug()、asse...

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 级别的日志。
    浏览器 API 之 — Console API浏览器 API 之 — Console API
    同理,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 的形式展示数据。
    浏览器 API 之 — Console API
    如果你的数据格式高度一致且需要进行对照查看,那么表格形式打印出来会非常直观。

  5. 追踪日志位置

    error 级别的日志,会逐级打印出错误信息的位置。那么如果 info 级别的日志如果需要逐级打印日志输出位置,那么就需要 trace() 方法,最终输出效果如下所示:
    浏览器 API 之 — Console API

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() 的区别是,一个打印的信息是展开的,一个是折叠的。如下例子:
浏览器 API 之 — Console API

打印信息特殊标识符

举例介绍一下 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 ,你就可以有很大的空间来把你的输出信息变得酷炫。比如我要在控制台打印一只猫:
    浏览器 API 之 — Console API

总结

Console API 为开发者提供了一些方便的功能,比如不同级别日志输出、计数器、计时器等,另外还为日志信息提供了各种展示形式,特别有趣的是还可以作用 css,这可以让你的控制台输出信息变得酷炫有趣。

本文地址:https://blog.csdn.net/weixin_49067499/article/details/107500432