程序員的日常應(yīng)該是不斷的制造Bug與修復(fù)Bug了，而修復(fù)Bug的速度往往象征著你經(jīng)驗(yàn)的高低。身為前端工程師的你console應(yīng)該是最常用到的調(diào)試工具了。殊不知，console居然還有很多你未曾體驗(yàn)過(guò)的好方法，本文將帶你一探究竟。
console是window對(duì)象的屬性之一，你可以通過(guò)通過(guò)console輸出有助于調(diào)試代碼的字符串、數(shù)組以及對(duì)象，然后通過(guò)瀏覽器控制臺(tái)(chrome->單擊右鍵->檢查->console)查看。
1、輸出的四種方式
// 用于輸出普通信息
console.log("normal:你我皆凡人，生在人世間");
// 用于輸出提示性信息(應(yīng)該會(huì)有個(gè)小圖標(biāo)，不過(guò)谷歌不支持)
console.info("information:人生不如意十有八九，還有一二三四五六七特別不如意。");
// 用于輸出錯(cuò)誤信息
console.error("error:我就是傳說(shuō)中的Bug");
// 用于輸出警示信息
console.warn("warn:沒有注釋留給你，難寫的代碼必定難讀");
打印結(jié)果：
以上四種方法雖然都可以打印，但給予你的視覺沖擊是不一樣的（info應(yīng)該會(huì)有一個(gè)小圖標(biāo)，不過(guò)谷歌不支持），這樣非常有助于你快速找到相應(yīng)的信息。
如果要清除打印信息你可以通過(guò):
console.clear()
2、判斷
assert方法用于判斷。接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是表達(dá)式，第二個(gè)參數(shù)是字符串。只有當(dāng)?shù)谝粋€(gè)參數(shù)為false，才會(huì)輸出第二個(gè)參數(shù)，否則不會(huì)有任何結(jié)果。
//無(wú)任何輸出
console.assert(1===1,"真");
//給予一個(gè)錯(cuò)誤提示“Assertion failed: 假”
console.assert(1!==1,"假");
3、統(tǒng)計(jì)
count方法用于計(jì)數(shù)，輸出它被調(diào)用了多少次。
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
結(jié)果：
4、分組打印
console.group("A組");
console.log("張三");
console.log("李四");
console.groupEnd();
console.group("B組");
console.log("王五");
console.log("趙六");
console.groupEnd();
// 默認(rèn)折疊
console.groupCollapsed("C組");
console.log("低調(diào)1");
console.log("低調(diào)2");
console.groupEnd();
效果：
5、打印對(duì)象
先來(lái)定義二個(gè)對(duì)象：
const box = {
userName:"laoTie",
age:18,
sex:"女"
};
const desk = {
userName:"laoWang",
age:88,
sex:"男"
};
如果現(xiàn)在要將這兩個(gè)對(duì)象全部打印出來(lái)，我們一般這樣：
console.log(box,desk);
運(yùn)行結(jié)果：
從結(jié)果來(lái)看，我們并不知道打印出來(lái)的內(nèi)容具體來(lái)自于哪一個(gè)對(duì)象。如果我們換一種方式：
console.log({box,desk});
這樣我們就可以知道具體打印的是哪一個(gè)對(duì)象了：
6、CSS渲染
%c 占位符是console最常用的。使用 %c 占位符時(shí)，對(duì)應(yīng)的后面的參數(shù)必須是 CSS 語(yǔ)句，用來(lái)對(duì)輸出內(nèi)容進(jìn)行 CSS 渲染。
const str = "十行代碼九個(gè)警告八個(gè)錯(cuò)誤竟然敢說(shuō)七日精通六天學(xué)會(huì)五湖四海也不見如此三心二意之項(xiàng)目經(jīng)理簡(jiǎn)直一等下流。"
// 輸出帶樣式文字
console.log("%c "+str,"color: red; font-size: 30px;font-weight:bold");
結(jié)果：
7、將對(duì)象打印成表格
我們可以使用table方法來(lái)用表格方式打印對(duì)象：
const box = {
userName:"laoTie",
age:18,
sex:"女"
};
const desk = {
userName:"laoWang",
age:88,
sex:"男"
};
console.table({box,desk})
打印結(jié)果：
8、計(jì)時(shí)器
我們可以通過(guò)time方法打印代碼的耗時(shí)情況：
// 計(jì)時(shí)開始
console.time('計(jì)時(shí)器');
let i = 0;
while (i < 9999999){
i++;
}
// 計(jì)時(shí)結(jié)束
console.timeEnd('計(jì)時(shí)器');
打印結(jié)果：
9、追蹤函數(shù)調(diào)用過(guò)程
通過(guò)trace可以追蹤到我們的方法被調(diào)用的情況：
function one(a) {
console.trace();
return a;
}
function two(a) {
return three(a);
}
function three(a) {
return one(a);
}
var a = two(666);
打印結(jié)果：
最后
合理的利用console的各種方法，會(huì)使我們的調(diào)試過(guò)程更加愉悅。
不過(guò)console除了本身作為調(diào)試?yán)饕酝?，還被一些網(wǎng)站作為招聘人才的一種廣告手段，例如百度：
輸出代碼：
try{
window.console &&
window.console.log &&
(
console.log("同學(xué)，祝賀你喜提彩蛋~\n" +
"或許你們還在猶豫是否加入，我會(huì)坦誠(chéng)的告訴你我們超酷；\n" +
"在這里大家都用無(wú)人車代步，AI音箱不僅播放還可以交互；\n" +
"人工智能是發(fā)展的核心技術(shù)，做自己讓未來(lái)不只領(lǐng)先幾步；\n" +
"在這里做自己，歡迎來(lái)到百度！\n"),
console.log("%c百度2019校園招聘簡(jiǎn)歷提交：" +
"http://dwz.cn/XpoFdepe " +
"你將有機(jī)會(huì)直接獲得面試資格）"
,"color:red")
)
}catch(e){}
天貓可以說(shuō)是將console利用到了極致！除了招聘信息外，它還在警告你：別在我的控制臺(tái)瞎折騰，后果很嚴(yán)重！
輸出：
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 此瀏覽器功能專供開發(fā)者使用。" +
"請(qǐng)不要在此粘貼執(zhí)行任何內(nèi)容，" +
"這可能會(huì)導(dǎo)致您的賬戶受到攻擊，" +
"給您帶來(lái)?yè)p失 ！",
"font-size: 20px;color:#333"),
console.info(e.logo+"\n\n"+e.info)
)
}catch(e){}
