js中console的使用

在javascript中，我们常用 console.log() 来输出信息，然而实际上console还有许多其他方法和属性，如console.dir()、console.time()、console.timeEnd()等，本文将对此进行详细介绍。

示例运行环境：Chrome 92

1. console.log()、console.info()、console.debug()、console.warn() 与 console.error()

先来说说console.log()，console.log() 用来在控制台输出一串信息，常用方法如下

（1）直接输出一串信息

const data1 = 1
const data2 = { a: 1 }
console.log(data1, data2)

输出如下：

（2）使用 C 语言 printf() 风格的占位符，不过其支持的占位符种类较少，只支持字符串（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

const data2 = { a: 1 }
console.log('data2 is %o', data2)

输出如下：

实际上，console.info()、console.debug()、console.warn() 及 console.error() 与 console.log 的用法一致，只是用来表示的信息种类不同，不同环境下，上述五个函数所打印出的信息，在控制台的显示是不一致的，举例如下

console.log('log')
console.info('info')
console.debug('debug')
console.warn('warn')
console.error('error')

Chrome：

不支持console.debug()，info 与 log 之前无图标，如下图

FireFox:

不支持console.warn()，info 之前有图标

Safari:

全部支持，不同的方法对应不同的图标

2. console.dir()

在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。这样说可能有些抽象，我们不妨来做个对比，分别用 console.log() 和 console.dir() 来输出 document 对象。

console.log()

console.dir()

对比两者，我们不难发现 console.dir() 将document以类似树的形式进行组织，清晰地显示了document的结构。

3. console.table()

将复合类型的数据转为表格显示。

const arr= [ 
  { num: "1"},
  { num: "2"}, 
  { num: "3" }
]
console.table(arr)

const obj= {
  a:{ num: "1"},
  b:{ num: "2"},
  c:{ num: "3" }
}
console.table(obj)

输出如下：

4. console.time() 、console.timeEnd()、console.timeLog()

console.time() 与 console.timeEnd() 需搭配使用，用来计算一段程序的运行时间。

console.time(timerName)：计时器开始。

console.timeEnd(timerName)：计时器结束，打印总时间。

console.timeLog(timerName): 计时器已开始时间。

其中 timerName 表示计时器的名称。

console.time(timer)
for (let i = 0; i < 5; i++) {
    console.timeLog(timer)
}
console.timeEnd(timer)

上述代码，定义了一个计时器timer，计时器开始于循环之前，结束于循环之后，输出循环执行时间。

5. console.group()、 console.groupEnd() 与 console.groupCollapsed()

一般的 console.log() 方法的输出没有层级关系，使用console.group()可对输出分层，使得输出的逻辑结构更清晰。

console.group()：分层开始。

console.groupEnd()：分层结束。

console.groupCollapsed(): 折叠分层。

console.group("1")
console.log("1-1")
console.log("1-2")
console.log("1-3")
console.groupEnd()
console.groupCollapsed("2")
console.log("2-1")
console.log("2-2")
console.log("2-3")
console.groupEnd()

如图：使用 console.groupCollapse() 代替 console.group()，则默认折叠分层。

6. console.trace()

用来追踪函数的调用过程

function a () {
    console.trace()
}

function b () {
    a()
}

b()

上述代码中，执行b函数，b函数调用a函数，那么，在a函数中就可用console.trace()追踪完整调用过程

7. console.assert()

assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。

8. console.count()

输出 count() 被调用的次数。此函数接受一个可选参数 label。

无label:

for (let i = 0; i < 5; i++) {
  console.count()
}

有label:

for (let i = 0; i < 5; i++) {
  console.count('label')
}

9. console.countReset()

for (let i = 0; i < 5; i++) {
  console.count('label')
}
console.countReset('label')
console.count('label')

重置计数器。此函数有一个可选参数 label。与console.count()搭配使用

10. console.memory

用于显示此刻使用的内存信息。（依赖浏览器环境，如 Firefox 中无此属性）

11. console.clear()

清空控制台。