程序員的日常應(yīng)該是不斷的制造Bug與修復(fù)Bug了，而修復(fù)Bug的速度往往象征著你經(jīng)驗(yàn)的高低咏闪。身為前端工程師的你console應(yīng)該是最常用到的調(diào)試工具了曙搬。殊不知，console居然還有很多你未曾體驗(yàn)過的好方法鸽嫂，本文將帶你一探究竟纵装。
console是window對象的屬性之一，你可以通過通過console輸出有助于調(diào)試代碼的字符串据某、數(shù)組以及對象橡娄，然后通過瀏覽器控制臺(tái)(chrome->單擊右鍵->檢查->console)查看。
1癣籽、輸出的四種方式
// 用于輸出普通信息
console.log("normal:你我皆凡人挽唉，生在人世間");
// 用于輸出提示性信息(應(yīng)該會(huì)有個(gè)小圖標(biāo)，不過谷歌不支持)
console.info("information:人生不如意十有八九才避，還有一二三四五六七特別不如意橱夭。");
// 用于輸出錯(cuò)誤信息
console.error("error:我就是傳說中的Bug");
// 用于輸出警示信息
console.warn("warn:沒有注釋留給你，難寫的代碼必定難讀");
打印結(jié)果：
以上四種方法雖然都可以打印桑逝，但給予你的視覺沖擊是不一樣的（info應(yīng)該會(huì)有一個(gè)小圖標(biāo)棘劣，不過谷歌不支持），這樣非常有助于你快速找到相應(yīng)的信息楞遏。
如果要清除打印信息你可以通過:
console.clear()
2茬暇、判斷
assert方法用于判斷。接受兩個(gè)參數(shù)寡喝，第一個(gè)參數(shù)是表達(dá)式糙俗，第二個(gè)參數(shù)是字符串。只有當(dāng)?shù)谝粋€(gè)參數(shù)為false预鬓，才會(huì)輸出第二個(gè)參數(shù)巧骚，否則不會(huì)有任何結(jié)果。
//無任何輸出
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沧奴、打印對象
先來定義二個(gè)對象：
const box = {
userName:"laoTie",
age:18,
sex:"女"
};
const desk = {
userName:"laoWang",
age:88,
sex:"男"
};
如果現(xiàn)在要將這兩個(gè)對象全部打印出來，我們一般這樣：
console.log(box,desk);
運(yùn)行結(jié)果：
從結(jié)果來看长窄，我們并不知道打印出來的內(nèi)容具體來自于哪一個(gè)對象滔吠。如果我們換一種方式：
console.log({box,desk});
這樣我們就可以知道具體打印的是哪一個(gè)對象了：
6纲菌、CSS渲染
%c 占位符是console最常用的。使用 %c 占位符時(shí)疮绷，對應(yīng)的后面的參數(shù)必須是 CSS 語句翰舌，用來對輸出內(nèi)容進(jìn)行 CSS 渲染。
const str = "十行代碼九個(gè)警告八個(gè)錯(cuò)誤竟然敢說七日精通六天學(xué)會(huì)五湖四海也不見如此三心二意之項(xiàng)目經(jīng)理簡直一等下流矗愧。"
// 輸出帶樣式文字
console.log("%c "+str,"color: red; font-size: 30px;font-weight:bold");
結(jié)果：
7灶芝、將對象打印成表格
我們可以使用table方法來用表格方式打印對象：
const box = {
userName:"laoTie",
age:18,
sex:"女"
};
const desk = {
userName:"laoWang",
age:88,
sex:"男"
};
console.table({box,desk})
打印結(jié)果：
8、計(jì)時(shí)器
我們可以通過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)用過程
通過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)試過程更加愉悅。
不過console除了本身作為調(diào)試?yán)饕酝馐舴撸€被一些網(wǎng)站作為招聘人才的一種廣告手段女器，例如百度：
輸出代碼：
try{
window.console &&
window.console.log &&
(
console.log("同學(xué)，祝賀你喜提彩蛋~\n" +
"或許你們還在猶豫是否加入住诸，我會(huì)坦誠的告訴你我們超酷驾胆；\n" +
"在這里大家都用無人車代步，AI音箱不僅播放還可以交互贱呐；\n" +
"人工智能是發(fā)展的核心技術(shù)丧诺，做自己讓未來不只領(lǐng)先幾步奄薇；\n" +
"在這里做自己驳阎，歡迎來到百度！\n"),
console.log("%c百度2019校園招聘簡歷提交：" +
"http://dwz.cn/XpoFdepe " +
"你將有機(jī)會(huì)直接獲得面試資格）"
,"color:red")
)
}catch(e){}
天貓可以說是將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ā)者使用饵隙。" +
"請不要在此粘貼執(zhí)行任何內(nèi)容，" +
"這可能會(huì)導(dǎo)致您的賬戶受到攻擊沮脖，" +
"給您帶來損失 金矛！",
"font-size: 20px;color:#333"),
console.info(e.logo+"\n\n"+e.info)
)
}catch(e){}
