全部
常见问题
产品动态
精选推荐

console使用方法介绍

管理 管理 编辑 删除


console是在写前端Javascript时经常会使用到,我平时使用最多的是console.log,相比大多数人也是如此吧!

e2194202302221122306530.png

下面一起来看一下强大的console吧!


01函数(属性)


包含如下函数 / 属性:memory、assert、clear、count、debug、dir、dirxml、error、exception、group、groupCollapsed、groupEnd、info、log、markTimeline、profile、profileEnd、table、time、timeEnd、timeStamp、timeline、timelineEnd、trace、warn。总计含有24个函数 / 属性。


02演示和说明


下面我们依次来演示和说明一下;


一、console.memory


注意:这是一个属性,并不是是函数,此属性是用来查看内存使用情况,如果我们使用过多的console.log()会占用大量的内存,导致浏览器出现卡死情况。


我们打开浏览器进入调试模式,在console一栏下输入:console.memory,执行回车。

01175202302221122593801.png


二、console.assert


使用示例:


console.assert(false,'这是一行文字')


此函数是在第一个参数为假的时候会在控制台输出信息。


三、console.clear


清空控制台输出信息,此方法可以在程序最好执行,将console出的信息进行清除,进一步的增加程序的安全性。使用方式如下:


console.clear()


四、console.count


此函数为统计打印次数,使用示例如下:


for (var i = 0; i < 10; i++) {console.count("当前输出")}


五、console.debug


此函数作用与console.log作用相同,均为调试输出,目前谷歌浏览器和opera不支持console.debug(),在控制台中看不到效果。我们在IE浏览器中看一下效果。


console.debug("这是一行文字")

7c873202302221126526005.png


六、console.dir


console.dir(dom)


此函数作用与console.log作用效果相同,但是在我们打开节点时,两者之间变现的存在差异。在观察节点时dir的效果要明显的好于log。

9aacc202302221127089707.png


七、console.dirxml


如果是一个html节点那么打印出来是dom节点,其他的打印同dir。


console.dirxml(dom)


八、console.error


错误输出,显示红色


console.error("这是一行文字")

5ad08202302221127262917.png


九、console.exception ()


exception 在部分浏览器浏览器中是console.error 的别名,谷歌最新浏览器已经废弃。


十、console.group()


大多数 console 中要输出高级和复杂的东西。分组可以让你归纳这些。尤其是让你能使用嵌套。它擅长展示代码中存在的结构关系。


console.group('Loop');

433ff202302221127443173.png


十一、console.groupCollapsed()


功能上和 console.group 一样,但是分组块一开始是折叠的。它没有得到很好的支持,但是如果你有一个无意义的庞大的分组并想默认隐藏它,可以试试这个函数。


十二、console.groupEnd()


主要是和console.group()、console.groupCollapsed()相关结合使用。


十三、console.info()


与console.log()相同


十四、console.log()


用于在控制台输出信息,在调试中非常实用。


十五、console.markTimeline()


console.markTimeline() 方法是 console.timeStamp()的废弃形式。


十六、console.profile()


检测性能,找出性能瓶颈,效果比console.time()更好


十七、console.profileEnd()


配合console.profile()使用


十八、console.table()


以列表形式展示数据,这比只扔下原始的对象数组要更加整洁、看起来更改直观。

386f520230222112802766.png


十九、console.time()


专门用于监测操作的时间开销的函数,也是监测 JavaScript 细微时间的更好的方式。


console.time();


二十、console.timeEnd()


配合console.time()使用


二十一、console.timeStamp()


该特性是非标准的,请尽量不要在生产环境中使用它!你可以选择用一个参数来作为时间戳标签,然后标记旁边就会显示这个标签。


二十二、console.timeline()


断点调试使用,此方法是 console.time() 的弃用形式。


二十三、console.timelineEnd()


配合console.timeline()使用


二十四、console.trace()


调试和查找问题使用,是非常高效的函数,效果比console.log()好很多,使用我们只能知道执行了哪一个基础库,并不知道执行的具体位置,而此方法显示一个跟踪,该跟踪显示了代码如何在特定点结束。


console.trace();


二十五、console.warn


以警告的形式输出信息,当出现大量的调试信息时,可以使用warn形式突出特定点位,便于排查错误位置,warn以黄色背景,并在输出文件前加叹号。在诸多信息中非常明显。

7836a202302221128193218.png


至此,已经将console的函数或方法做了简单的介绍和说明,部分的函数演示并未配图,如果错误欢迎指出、虚心受教。


CRMEB-慕白寒窗雪 最后编辑于2023-02-22 11:29:09

快捷回复
回复({{post_count}}) {{!is_user ? '我的回复' :'全部回复'}}
回复从新到旧

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}} 作者 管理员 企业

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest==1? '取消推荐': '推荐'}}
{{item.floor}}#
{{item.user_info.title}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
{{item.like_count}}
{{item.showReply ? '取消回复' : '回复'}}
删除
回复
回复

{{itemc.user_info.nickname}}

{{itemc.user_name}}

作者 管理员 企业

回复 {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}   {{itemc.ip_address}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回复' : '回复'}}
删除
回复
回复
查看更多
回复
回复
1112
{{like_count}}
{{collect_count}}
添加回复 ({{post_count}})

相关推荐

CRMEB-慕白寒窗雪 作者
社区运营专员---高冷のBoy | 呆萌のGirl

回答

1102

发布

1750

经验

39820

快速安全登录

使用微信扫码登录
{{item.label}} {{item.label}} {{item.label}} 板块推荐 常见问题 产品动态 精选推荐 首页头条 首页动态 首页推荐
加精
取 消 确 定
回复
回复
问题:
问题自动获取的帖子内容,不准确时需要手动修改. [获取答案]
答案:
提交
bug 需求 取 消 确 定

快速安全登录

使用微信扫码登录

手机登录

{{codeText}}
{{isQrcode ? '手机登录' : '扫码登录'}}
CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

微信扫码咨询

CRMEB开源商城下载 开源下载 CRMEB官方论坛 帮助文档
返回顶部 返回顶部
CRMEB客服