console.log，作為一個前端開發(fā)者，可能每天都會用它來分析調(diào)試，但這個簡單函數(shù)背后不簡單那一面，你未必知道……

基礎(chǔ)

首先，簡單科普這個函數(shù)的作用。前端開發(fā)者可以在js代碼的任何部分調(diào)用console.log，然后你就可以在瀏覽器的開發(fā)者控制臺里，看到這個函數(shù)調(diào)用的那一瞬間你指定的變量或表達式的值。

最基本的調(diào)用方法：

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

我們可以通過上面的方式進行單個變量（表達式）、多個變量以及換行輸出。而這對于日常開發(fā)的大多數(shù)情況算是夠用了。

格式化輸出

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

寫過C語言的童鞋肯定對上面這種寫法不陌生，這種寫法在復雜的輸出時，能保證模板和數(shù)據(jù)分離，結(jié)構(gòu)更加清晰。不過簡單的輸出就不那么方便了。

console.log支持的格式標志有:

前三種格式不用多說，%o、%O都是用來輸出Object對象的，對普通的Object對象，兩者沒區(qū)別，但是打印dom節(jié)點時就不一樣了：

使用%o輸出和不使用格式化輸出打印出來的結(jié)果一樣，你可以查看這個dom節(jié)點的內(nèi)容、子節(jié)點等；而使用%O，你看到的則是該dom節(jié)點各個對象屬性。對應(yīng)我們平時把數(shù)據(jù)寄放到dom節(jié)點的兩種方式：

BTW，格式化輸出還可以和普通輸出混合著來：

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

豐富樣式輸出

大家等待已久的高潮來了，鼓掌，再看下妹子：

這是怎么做到的呢？其實看了上一節(jié)肯定有童鞋猜到了，那就是用%c進行css樣式格式化輸出。常見的富樣式輸出有兩種：文字樣式、圖片輸出。

文字樣式

很簡單對吧？這是最簡單的寫法，其實%c可以寫在任何地方，不限于開頭，然后%c后面所有的輸出會應(yīng)用我們指定的樣式。

那如果我想單獨對我輸出的一句話中間某幾個字進行樣式處理呢？一般來說，沒辦法，不過有變通的手段：

附：console.log輸出的超鏈接會被自動識別并加上灰色字體顏色和下劃線的樣式，而這個無法用%c覆蓋

圖片輸出

嚴格來講，console.log不支持直接圖片輸出，但我們可以用背景圖曲線救國。但，你真正去試了才發(fā)現(xiàn)沒那么簡單，你沒法像平時那樣輸出背景圖，原因呢，就是你沒法直接設(shè)置width和height樣式。

就好像上面的示例，要輸出一張438×166的圖片，我用padding來把整個區(qū)域撐開到我要的大小，然后還要設(shè)置line-height才行。關(guān)于這些屬性的值大家估計會困惑，我一一說明：

line-height的值我取圖片高度background就不需多說，但你會發(fā)現(xiàn)no-repeat設(shè)置了沒生效。。。padding左右兩邊的值顯然是圖片寬度的一半最頭痛的是padding上下的值，我試過高度一半的值，結(jié)果輸出的大小比我想象的高！所以建議：用我這種方法輸出，padding上下的值你要一點點的調(diào)整直到達到你要的輸出

之所以強調(diào)我的方法，是因為還有其他方法可以控制背景圖輸出。有興趣的童鞋還可以參考一個叫 console.image 的插件：

關(guān)于富樣式輸出說了這么多，現(xiàn)在不得不提下瀏覽器兼容性：

個人感覺，控制臺富樣式輸出雖然最后輸出看到起來很上流，但開發(fā)者會寫得很糾結(jié)，畢竟沒法控制dom節(jié)點應(yīng)用正常的css樣式。其中圖片輸出真是一個非(sang)常(xin)強(bing)大(kuang)的功能。

那些兄妹

這些都可以做調(diào)試輸出，區(qū)別是：

樣式不同我們可以通過調(diào)試器底部篩選出不同的輸出項

所以跟網(wǎng)站重構(gòu)要求html語義化類似，當我們的調(diào)試輸出比較多時，根據(jù)實際場景使用不同類型的輸出函數(shù)能使我們的輸出更有條理。

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

其實這一系還有函數(shù)（丫的搞這么多類似的）：

// 等價
console.log('%o', document.body);
console.log(document.body);
// 等價
console.log('%O', document.body);
console.dir(document.body);

它們才是失散多年的兄妹嗎。。

鄰居們

其實除了打印調(diào)試信息外，console還有不少強大有用但卻很低調(diào)的接口。

console.time & console.timeEnd

這是性能調(diào)試的利器啊，熟悉NodeJs的童鞋更是清楚?？隙ú簧偻蛇^這事：在我們的某塊代碼前新增一個類似startTime的變量，給它一個時間戳，然后在我們執(zhí)行完代碼后，再打一個時間戳，再將兩者相減，再將結(jié)果輸出。現(xiàn)在我們使用上面的函數(shù)，就可以省下很多功夫了：

上面是我寫的一個懶加載判斷圖片是否在可視區(qū)域內(nèi)，可以看出調(diào)用10000次花費時間為160ms左右，使用這兩個接口是何其方便！而且我們還可以將一個字符串作為函數(shù)參數(shù)，來區(qū)分不同的性能計時。

console.count

這是一個計數(shù)器，我們可以傳個名字給它，如a，然后每次調(diào)用console.count('a')（可以在不同函數(shù)不同地方），它就能打印出這樣一個調(diào)用執(zhí)行了多少次：

這個函數(shù)特別適用于在一些復雜的場景，有時一個函數(shù)被多個地方調(diào)用到，而我們想知道該函數(shù)是否少調(diào)用或重復調(diào)用，此時使用計數(shù)器比js斷點自己還要默記調(diào)了幾次快多了。

console.assert

assert，搞編程的應(yīng)該對這個單詞不陌生：斷言。使用console.assert，你可以理解為于禁的技能（三國殺玩多了這孩子），你猜錯了這個表達式的真假，那我就可以打出我的信息：

不消說，使用該函數(shù)可以讓我們在某些地方只在符合某個條件才進行調(diào)試輸出，使輸出更加干凈。當然你也可以用if語句，不過寫起來就麻煩了一些。

console.group

一看就知道是分組輸出：

而且這個分組還可以嵌套的：

顯然這個函數(shù)特別適合有一大堆調(diào)試輸出的情況，做大項目估計會用上。不過有時你打開控制臺看到滿屏滿屏的輸出你也會很頭痛的，于是你可以分組輸出且默認收起：

console.clear

最后的最后，該清場了。

特別適用于，在一個多人開發(fā)項目，你不爽別人的調(diào)試輸出，那你可以用這個函數(shù)統(tǒng)統(tǒng)清掉，再輸出自己的調(diào)試信息，不用跟這個函數(shù)客氣。

總結(jié)

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

這是【那些不為人知的接口系列】的第一篇，瀏覽器其實提供了很多有用的接口給我們，我們要不不知道，要不知道了感覺用不上，該系列試圖將它們一一挖掘出來并給出適用場景建議，敬請期待。

附conssole.timestamp & console.profile這兩個函數(shù)對應(yīng)chrome調(diào)試面板的兩個tab，調(diào)試性能時可用上，有興趣的童鞋可以看看：Google開發(fā)者文檔之console

最新評論