js Console 对象 - Kaiqisan

js Console 对象

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 昨天在玩webstorm的时候,在输入console.之后,它自动弹出很多其他方法,抱着好奇的心态,我查了一些资料,发现了新大陆~

Console 对象提供了访问浏览器调试模式的信息到控制台。

方法 描述
assert() 如果断言为 false,则在信息到控制台输出错误信息。
clear() 清除控制台上的信息。
count() 记录 count() 调用次数,一般用于计数。
error() 输出错误信息到控制台(可以人为报错)
group() 在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始,console.groupEnd() 结束
groupCollapsed() 在控制台创建一个信息分组。 类似 console.group() ,但它默认是折叠的。
groupEnd() 设置当前信息分组结束
info() 控制台输出一条信息
log() 控制台输出一条信息
table() 以表格形式显示数据(真的在输出栏中画一个表格,用来显示数组和对象最好)
time() 计时器,开始计时间,与 timeEnd() 联合使用,用于算出一个操作所花费的准确时间。
timeEnd() 计时结束
trace() 显示当前执行的代码在堆栈中的调用路径。
warn() 输出警告信息,信息最前面加一个黄色三角,表示警告(可以人为警告)

以上表格资料来自菜鸟教程

部分方法的使用例

console.time(val)console.timeEnd(val) 内部参数为计时器名字,为计时器的唯一区分标准,console.timeEnd(val)也需要指定关闭的计时器名字

console.time('a') // 开始计时
/// 待执行的代码
console.timeEnd('a') 	// 这里会输出执行完成上面代码所消耗的时间

PS:当一个计时器开启的时候不可再次开启第二个同样的计时器,否则报警告。或者一个关闭了一个目前没在运行的计时器,也会报警告

console.time('a') 
console.time('a') // 这样不行

console.group(val), console.groupCollapsed(val), console.groupEnd()收集从console.group()console.groupCollapsed()开始到console.groupEnd()期间遇到所有打印信息全部整合,括号内的val可传值以命名分组的名字。

console.group('apop')
console.log('a')
console.log('a')
console.log('a')
console.log('a')
console.log('a')
console.log('a')
console.groupEnd()

group
也可以点击折叠,也可以生成一个二级列表

但是

这个方法是同步方法,它不会等待在期间的异步函数的执行,建议如果遇到异步函数把console.groupEnd()写在异步函数执行完成之后的回调函数中(then() catch()).

console.assert(val): 判断内部的输出内容是否为true,如果是true,就不输出,如果是false就报错

Assertion failed: console.assert

count(val):调用就开始计数,内部传参val为计数器的名字,不同的名字代表不同的计数器.

console.count('s')
console.count('s')
console.count('s')
console.count('s')
console.count('d')
console.count('d')
console.count('d')
console.count('d')

输出为

在这里插入图片描述

PS:计数器的名字必须为字符串,如果传入其他类型的数据的话,都会被隐性地转化为字符串类型。

总结

有了这么些,就不要只使用console.log()了,这么多方便的工具非常利于开发,建议记住,非常实用,孩子很喜欢,已经用了一亿次了。

猜你喜欢

转载自blog.csdn.net/qq_33933205/article/details/108102368