程序员的日常应该是不断的制造Bug与修复Bug了，而修复Bug的速度往往象征着你经验的高低。身为前端工程师的你console应该是最常用到的调试工具了。殊不知，console居然还有很多你未曾体验过的好方法，本文将带你一探究竟。
console是window对象的属性之一，你可以通过通过console输出有助于调试代码的字符串、数组以及对象，然后通过浏览器控制台(chrome->单击右键->检查->console)查看。
1、输出的四种方式
// 用于输出普通信息
console.log("normal:你我皆凡人，生在人世间");
// 用于输出提示性信息(应该会有个小图标，不过谷歌不支持)
console.info("information:人生不如意十有八九，还有一二三四五六七特别不如意。");
// 用于输出错误信息
console.error("error:我就是传说中的Bug");
// 用于输出警示信息
console.warn("warn:没有注释留给你，难写的代码必定难读");
打印结果：
以上四种方法虽然都可以打印，但给予你的视觉冲击是不一样的（info应该会有一个小图标，不过谷歌不支持），这样非常有助于你快速找到相应的信息。
如果要清除打印信息你可以通过:
console.clear()
2、判断
assert方法用于判断。接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。
//无任何输出
console.assert(1===1,"真");
//给予一个错误提示“Assertion failed: 假”
console.assert(1!==1,"假");
3、统计
count方法用于计数，输出它被调用了多少次。
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
结果：
4、分组打印
console.group("A组");
console.log("张三");
console.log("李四");
console.groupEnd();
console.group("B组");
console.log("王五");
console.log("赵六");
console.groupEnd();
// 默认折叠
console.groupCollapsed("C组");
console.log("低调1");
console.log("低调2");
console.groupEnd();
效果：
5、打印对象
先来定义二个对象：
const box = {
userName:"laoTie",
age:18,
sex:"女"
};
const desk = {
userName:"laoWang",
age:88,
sex:"男"
};
如果现在要将这两个对象全部打印出来，我们一般这样：
console.log(box,desk);
运行结果：
从结果来看，我们并不知道打印出来的内容具体来自于哪一个对象。如果我们换一种方式：
console.log({box,desk});
这样我们就可以知道具体打印的是哪一个对象了：
6、CSS渲染
%c 占位符是console最常用的。使用 %c 占位符时，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。
const str = "十行代码九个警告八个错误竟然敢说七日精通六天学会五湖四海也不见如此三心二意之项目经理简直一等下流。"
// 输出带样式文字
console.log("%c "+str,"color: red; font-size: 30px;font-weight:bold");
结果：
image.png
7、将对象打印成表格
我们可以使用table方法来用表格方式打印对象：
const box = {
userName:"laoTie",
age:18,
sex:"女"
};
const desk = {
userName:"laoWang",
age:88,
sex:"男"
};
console.table({box,desk})
打印结果：
8、计时器
我们可以通过time方法打印代码的耗时情况：
// 计时开始
console.time('计时器');
let i = 0;
while (i < 9999999){
i++;
}
// 计时结束
console.timeEnd('计时器');
打印结果：
image.png
9、追踪函数调用过程
通过trace可以追踪到我们的方法被调用的情况：
function one(a) {
console.trace();
return a;
}
function two(a) {
return three(a);
}
function three(a) {
return one(a);
}
var a = two(666);
打印结果：
最后
合理的利用console的各种方法，会使我们的调试过程更加愉悦。
不过console除了本身作为调试利器以外，还被一些网站作为招聘人才的一种广告手段，例如百度：
输出代码：
try{
window.console &&
window.console.log &&
(
console.log("同学，祝贺你喜提彩蛋~\n" +
"或许你们还在犹豫是否加入，我会坦诚的告诉你我们超酷；\n" +
"在这里大家都用无人车代步，AI音箱不仅播放还可以交互；\n" +
"人工智能是发展的核心技术，做自己让未来不只领先几步；\n" +
"在这里做自己，欢迎来到百度！\n"),
console.log("%c百度2019校园招聘简历提交：" +
"http://dwz.cn/XpoFdepe " +
"你将有机会直接获得面试资格）"
,"color:red")
)
}catch(e){}
天猫可以说是将console利用到了极致！除了招聘信息外，它还在警告你：别在我的控制台瞎折腾，后果很严重！
输出：
var e={
"info":"喵~ 加入我们吧 https://tb.cn/iS8NBOy",
"logo":" ::: ::: \n" +
" ::::::: ::::: \n" +
"::::::::: ::::::::\n" +
":::::::::::::::::::::::::::::::::::::::::::\n" +
":::: ::: :::::::::::::::: ::: ::::\n" +
"::: Smart :::::cool:::: Crazy :::\n" +
"::::: ::: ::::::::::::::: ::: :::\n" +
":::::::::::::::::::::::::::::::::::::::::::"
};
try {
window.console && console.log &&
(
console.log("%c 安全警告",
"font-size:50px;" +
"color:red;" +
"-webkit-text-fill-color:red;" +
"-webkit-text-stroke: 1px black;"),
console.log("%c 此浏览器功能专供开发者使用。" +
"请不要在此粘贴执行任何内容，" +
"这可能会导致您的账户受到攻击，" +
"给您带来损失 ！",
"font-size: 20px;color:#333"),
console.info(e.logo+"\n\n"+e.info)
)
}catch(e){}
[公众号回复“电子书”，送你经典前端电子书籍]
—————END—————
喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容
image
网友评论