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.assert(1 === 0, "assert failed") |
| console.clear() | 清除当前控制台的所有输出，将光标回置到第一行。 | console.clear() |
| console.count() | 用于计数，输出它被调用了多少次。 | for (left i = 0; i < 5; i++) {
console.count('count');
} |
| console.error() | 输出带有红色叉号的错误信息，同时会显示错误发生的堆栈。 | console.error("错误") |
| console.group() | 用于将显示的信息分组，可以把信息进行折叠和展开。 | console.group('第一层分组');
console.group('第二层分组');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd(); |
| console.groupCollapsed() | 与console.group方法类似，唯一的区别是该组的内容在第一次显示时是收起的。 | console.groupCollapsed('第一层分组');
console.groupCollapsed('第二层分组');
console.log('error');
console.error('error');
console.warn('error');
console.groupEnd();
console.groupEnd(); |
| console.groupEnd() | 结束内联分组 | |
| console.info() | 打印资讯类说明信息，和console.log一样 | |
| console.log() | 输出信息 | console.log("hello china!") |
| console.table() | 将复合类型的数据转为表格显示。 | var arrs = [
{num: "1"},
{num: "2"},
{num: "3" }
];
console.table(arrs);
var obj = {
a: {num: "1"},
b: {num: "2"},
c: {num: "3"}
};
console.table(obj); |
| console.time() | 开始计时 | console.time('计时器');
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器'); |
| console.timeEnd() | 结束计时 | |
| console.trace() | 追踪函数的调用过程 | function d(a) {
console.trace();
return a;
}
function b(a) {
return c(a);
}
function c(a) {
return d(a);
}
var a = b('123'); |
| console.warn() | 输出带有黄色感叹号的警告信息 | 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）