console上竟然有这么多方法?

205 阅读3分钟

浏览器控制台的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.debug 打开后如图:

console.debug-2

console.warn

向控制台打印一条警告类型的信息 语法如下:

console.warn(obj1 [, obj2, ..., objN]);

console.dir

在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示,语法如下:

console.dir(obj)

console.dirxml

在控制台输出一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果入参不是XML/HTML元素,那么会以JavaScript对象的形式作为替代,与console.dir不同,它输出的是后所有的后代元素。 如图:

console.dirxml

console.table

以表格形式打印出数据,参数为对象或者数组,还有一个可选参数columns制定需要显示的列,直接上图,看看效果

打印数组: console.table

打印对象: console.table-2

当数组对象存在多个属性,且只想显示一部分时,如下图(隐藏了sex属性):

console.table-3

console.trace

向控制台输出一个堆栈跟踪,实际效果如图所示:

console.trace

console.group & groupCollapsed & console.groupEnd

console.group是向控制台创建一个分组,后续控制台上所有内容都到该分组下,且被添加一个缩进,分组默认为展开状态,直到console.groupEnd被调用

console.groupCollapsed与console.group方法的效果相同,只是创建出来的分组默认是关闭的状态

console.groupEnd结束缩进,需要与console.group配合使用,否则没有任何效果

console.group

console.clear

清除当前控制台上的所有信息

console.count & console.countReset

console.count输出自身被调用的次数,可选传入一个label,不同的label分别计数 console.countReset则重置当前的计数,不传参数则重置默认计数器,传入一个label则重置对应label的计数器

console.count

console.assert

参数为一个值或者表达式

console.assert(expression || data)

断言,如果断言内容的结果为true,则无事发生,如果为false,则向控制台输出一个断言失败的信息,不传入参数则会直接断言失败

console.profile & console.profileEnd (chrome或firefox)

console.profile记录性能信息,可选传入一个profile名称 console.profileEnd结束记录性能信息,也可选传入名称;若传入了名称,则停止传入名称的记录,否则停止最近一个记录

记录完成后,可在控制台上右上角的菜单->more tools->JavaScript Profiler里查看,如图所示:

开始和结束记录: console.profile

查看最终的记录: 查看profile记录

console.time & console.timeLog & console.timeEnd

console.time在控制台启动一个计时器,必须传入一个计时器名称 console.timeEnd必须传入一个计时器名称,结束指定名称的计时器,停止后该计时器会被自动输出到控制台 console.timeLog必须传入一个已经启动的计时器,打印计时器当前时间 如图所示 console.time

console.timeStamp

向浏览器的Performance(Chrome)或者Waterfall(Firefox)工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等。

你可以选择用一个参数来作为时间戳标签,然后标记旁边就会显示这个标签。

console.timeStamp(label)

参考资料:MDN-Console

以上就是我不知道的console 如果有问题,欢迎讨论,如果喜欢也请大家帮忙点个赞,鼓励下作者~ 也欢迎大家关注我的微信公众号前端划水仔,来和我一起快乐的摸鱼,谢谢各位~