console.log，作為一個前端開發者，想必每天都會用它來做分析除錯，但這個簡單函式背後你所不知道的一面，很多人未必使用過，有一些也是很方便使用的

基礎

首先，簡單科普這個函式的作用。前端開發者可以在js程式碼的任何部分呼叫console.log，然後你就可以在瀏覽器的開發者控制檯裡，看到這個函式呼叫的那一瞬間你指定的變數或表示式的值。

console.log('123');
// 123
  
console.log('1', '2', '3');
// 1 2 3
  
console.log('1\n2\n3\n');
// 1
// 2
// 3

我們可以通過上面的方式進行單個變數（表示式）、多個變數以及換行輸出。而這對於日常開發的大多數情況算是夠用了。 格式化輸出

console.log('%d + %d = %d', 1, 1, 2);//或console.log(1,1,2);
// 1 + 1 = 2

寫過C語言的童鞋肯定對上面這種寫法不陌生，這種寫法在複雜的輸出時，能保證模板和資料分離，結構更加清晰。不過簡單的輸出就不那麼方便了。 console.log支援的格式標誌有:

常用我就不說了，說一下，不常用的，

console.log/debug/warn/error, 這些都可以做除錯輸出，區別是：

樣式不同我們可以通過偵錯程式底部篩選出不同的輸出項

所以跟網站重構要求html語義化類似，當我們的除錯輸出比較多時，根據實際場景使用不同型別的輸出函式能使我們的輸出更有條理。

值得一提的是console.error，我們使用它做輸出除了可以輸出錯誤資訊外，還可以輸出呼叫這個函式的一瞬間的呼叫棧！這無疑給我們除錯帶來很多方便（當然你也可以用js斷點一步步跟蹤），而這是console.log所不具備的。除了console.error，還有一個函式console.trace也可以打印出呼叫一瞬間的呼叫棧，不過它的輸出樣式和位置就跟console.log一樣了：

其實除了列印除錯資訊外，console還有不少強大有用但卻很低調的介面。

console.time & console.timeEnd

這是效能除錯的利器啊，熟悉NodeJs的童鞋更是清楚。肯定不少童鞋幹過這事：在我們的某塊程式碼前新增一個類似startTime的變數，給它一個時間戳，然後在我們執行完程式碼後，再打一個時間戳，再將兩者相減，再將結果輸出。現在我們使用上面的函式，就可以省下很多功夫了：

console.time('wait');
setTimeOut(()=>{
	console.timeEnd('wait');
},1000);
wait: 1000ms

使用這兩個介面是何其方便！而且我們還可以將一個字串作為函式引數，來區分不同的效能計時。

console.count

這是一個計數器，我們可以傳個名字給它，如a，然後每次呼叫console.count(‘a’)（可以在不同函式不同地方），它就能打印出這樣一個呼叫執行了多少次：

let a = ()=>{
	console.count('Call function a');
};
let b = ()=>{
	a();
}
let c = ()=>{
	b();
}
b();
c();
Call function a:1
Call function b:2

這個函式特別適用於在一些複雜的場景，有時一個函式被多個地方呼叫到，而我們想知道該函式是否少呼叫或重複呼叫，此時使用計數器比js斷點自己還要默記調了幾次快多了。

console.assert

assert，搞程式設計的應該對這個單詞不陌生：斷言。使用console.assert，你可以理解為于禁的技能（三國殺玩多了這孩子），你猜錯了這個表示式的真假，那我就可以打出我的資訊：

let a = ()=>{
	let el = document.getElementById('test');
	console.assert(el,'沒有ID為test的節點');
}
a();
// Assertion failed: 沒有ID為test的節點

不消說，使用該函式可以讓我們在某些地方只在符合某個條件才進行除錯輸出，使輸出更加乾淨。當然你也可以用if語句，不過寫起來就麻煩了一些。

console.group

一看就知道是分組輸出：

console.group('group1');
console.log('a');
console.log('b');
console.groupEnd('group1');
console.group('group2');
console.log('a2');
console.log('b2');
console.groupEnd('group2');

顯然這個函式特別適合有一大堆除錯輸出的情況，做大專案估計會用上。不過有時你開啟控制檯看到滿屏滿屏的輸出你也會很頭痛的，於是你可以分組輸出且預設收起：

console.clear

最後的最後，該清場了。

特別適用於，在一個多人開發專案，你不爽別人的除錯輸出，那你可以用這個函式統統清掉，再輸出自己的除錯資訊，不用跟這個函式客氣。

總結

我是王大錘，萬萬沒想到，console.log的八卦就這樣被我說完了，本以為還可以吹水個幾萬字。

附conssole.timestamp & console.profile這兩個函式對應chrome除錯面板的兩個tab，除錯效能時可用上，有興趣的童鞋可以看看：Google開發者文件之console