WEB学习进阶之路五
【摘要】 后面几节开始学习javascript的性能优化,不过有话说“工欲善其事,必先利其器”,又有说“磨刀不误砍柴功”。接下来本章就先磨磨刀。认识下性能优化中的利器console控制台。console是js的一个对象,它可以接入不同的浏览器,实现相关功能,对于不同浏览器又不同的表现结果,本章主要是以chrome为蓝本,进行下面课程的讲解打开chrome,使用 F12 键或者 Ctrl+Shift+i...
后面几节开始学习javascript的性能优化,不过有话说“工欲善其事,必先利其器”,又有说“磨刀不误砍柴功”。
接下来本章就先磨磨刀。认识下性能优化中的利器console控制台。
console是js的一个对象,它可以接入不同的浏览器,实现相关功能,对于不同浏览器又不同的表现结果,本章主要是以chrome为蓝本,进行下面课程的讲解
打开chrome,使用 F12 键或者 Ctrl+Shift+i组合键打开控制台
本章主要讲解下console对象的使用,我先列一张表,将console的所有对象方法展示出来,便于大家有个直观的了解。对于今后需要用到性能分析主要的我会以红字标识。
方法 | 描述 | 实例 |
---|---|---|
console.assert() | 接受两个参数,第一个参数是表达式,第二个参数是字符串【可选】。 当第一个参数为false,才会输出第二个参数,否则不会有结果。 失败时会同时会显示堆栈。 |
|
console.clear() | 清除当前控制台的所有输出,将光标回置到第一行。 |
|
console.count() | 用于计数,输出它被调用了多少次。 |
|
console.error() | 输出带有红色叉号的错误信息,同时会显示错误发生的堆栈。 |
|
console.group() | 用于将显示的信息分组,可以把信息进行折叠和展开。 |
|
console.groupCollapsed() | 与console.group方法类似,唯一的区别是该组的内容在第一次显示时是收起的。 |
|
console.groupEnd() | 结束内联分组 | |
console.info() | 打印资讯类说明信息,和console.log一样 | |
console.log() | 输出信息 |
|
console.table() | 将复合类型的数据转为表格显示。 |
|
console.time() | 开始计时 |
|
console.timeEnd() | 结束计时 | |
console.trace() | 追踪函数的调用过程 |
|
console.warn() | 输出带有黄色感叹号的警告信息 |
|
在对信息输出时可以使用下面的字符,以便进行参数替换
置换串 | 描述 |
---|---|
%o | 打印Javascript对象或者DOM节点对象,DOM输出类似控制台中的Element元素那样 |
%O | 打印Javascript对象或者DOM节点对象,DOM输出DOM树,类似javascript对象那样 |
%d | %i | 打印整数,格式化输出整数 |
%f |
打印浮点数,格式化输出浮点数 |
%s | 打印字符串 |
%c | 根据提供的样式参数,样式化展示字符串 |
下来在介绍一个比较有意思的东西,经常在大公司的网站按F12调出控制台以后,会发现他会输出一些字符画,怎么做的呢,接下来教教大家,让你也应用在你的网站用,提升下你的逼格๑乛◡乛๑。
百度随便搜索字符画,有很多在线网站,这里就不列举了,当然有很多ide也有相关的插件让你去使用,更有js的代码插件直接调用,这里介绍一个简单的方式,比如
hello china这个文字,
去相关网站生成asccii字符画
复制结果到notepad++, 替换所有的\r\n或者\n为a(注意替换使用的规则是正则),注意这里a在字符画的结果中如果没有,那就可以使用,否则请用其他代替。
将a换成\n(注意替换使用的规则是字符串),另外a和第二步的字符要对上。
将结果复制到console.log中,可以看到效果啦
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)