浏览器控制台的console
上有多少方法,你知道吗?
本篇文章将为大家简单介绍一下,你不知道的 我不知道的console
console
console.log
最最基础的打印功能,这个大家都知道,这里就不过多赘述
console.log(obj1 [, obj2, ..., objN]);
console.error
在控制台打印报错,语法如下:
console.error(obj1 [, obj2, ..., objN]);
console.info
MDN上有如下介绍:
向web控制台输出一个通知信息。仅在Firefox,web控制台的日志中的项目旁边会显示一个小的‘I‘图标
语法如下:
console.info(obj1 [, obj2, ..., objN]);
实际测试在Safari浏览器也会有一个小的“I”图标,在Chrome中则与console.log
没有任何区别
console.debug
向控制台输出调试信息,仅在控制台配置了显示调试输出时显示(浏览器的控制台filter勾选上Verbose),如下图:
打开后如图:
console.warn
向控制台打印一条警告类型的信息 语法如下:
console.warn(obj1 [, obj2, ..., objN]);
console.dir
在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示,语法如下:
console.dir(obj)
console.dirxml
在控制台输出一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果入参不是XML/HTML元素,那么会以JavaScript对象的形式作为替代,与console.dir
不同,它输出的是后所有的后代元素。
如图:
console.table
以表格形式打印出数据,参数为对象或者数组,还有一个可选参数columns制定需要显示的列,直接上图,看看效果
打印数组:
打印对象:
当数组对象存在多个属性,且只想显示一部分时,如下图(隐藏了sex属性):
console.trace
向控制台输出一个堆栈跟踪,实际效果如图所示:
console.group & groupCollapsed & console.groupEnd
console.group
是向控制台创建一个分组,后续控制台上所有内容都到该分组下,且被添加一个缩进,分组默认为展开状态,直到console.groupEnd
被调用
console.groupCollapsed
与与console.group
方法的效果相同,只是创建出来的分组默认是关闭的状态
console.groupEnd
结束缩进,需要与console.group
配合使用,否则没有任何效果
console.clear
清除当前控制台上的所有信息
console.count & console.countReset
console.count
输出自身被调用的次数,可选传入一个label,不同的label分别计数
console.countReset
则重置当前的计数,不传参数则重置默认计数器,传入一个label则重置对应label的计数器
console.assert
参数为一个值或者表达式
console.assert(expression || data)
断言,如果断言内容的结果为true,则无事发生,如果为false,则向控制台输出一个断言失败的信息,不传入参数则会直接断言失败
console.profile & console.profileEnd (chrome或firefox)
console.profile
记录性能信息,可选传入一个profile名称
console.profileEnd
结束记录性能信息,也可选传入名称;若传入了名称,则停止传入名称的记录,否则停止最近一个记录
记录完成后,可在控制台上右上角的菜单->more tools->JavaScript Profiler里查看,如图所示:
开始和结束记录:
查看最终的记录:
console.time & console.timeLog & console.timeEnd
console.time
在控制台启动一个计时器,必须传入一个计时器名称
console.timeEnd
必须传入一个计时器名称,结束指定名称的计时器,停止后该计时器会被自动输出到控制台
console.timeLog
必须传入一个已经启动的计时器,打印计时器当前时间 如图所示
console.timeStamp
向浏览器的Performance(Chrome)或者Waterfall(Firefox)工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等。
你可以选择用一个参数来作为时间戳标签,然后标记旁边就会显示这个标签。
console.timeStamp(label)
参考资料:MDN-Console
以上就是我不知道的console
如果有问题,欢迎讨论,如果喜欢也请大家帮忙点个赞,鼓励下作者~
也欢迎大家关注我的微信公众号前端划水仔,来和我一起快乐的摸鱼,谢谢各位~