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

基礎(chǔ)

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

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

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

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

格式化輸出

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

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

console.log支持的格式標(biāo)志有:

前三種格式不用多說(shuō)，%o、%O都是用來(lái)輸出Object對(duì)象的，對(duì)普通的Object對(duì)象，兩者沒(méi)區(qū)別，但是打印dom節(jié)點(diǎn)時(shí)就不一樣了：

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

BTW，格式化輸出還可以和普通輸出混合著來(lái)：

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

豐富樣式輸出

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

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

文字樣式

很簡(jiǎn)單對(duì)吧？這是最簡(jiǎn)單的寫(xiě)法，其實(shí)%c可以寫(xiě)在任何地方，不限于開(kāi)頭，然后%c后面所有的輸出會(huì)應(yīng)用我們指定的樣式。

那如果我想單獨(dú)對(duì)我輸出的一句話中間某幾個(gè)字進(jìn)行樣式處理呢？一般來(lái)說(shuō)，沒(méi)辦法，不過(guò)有變通的手段：

附：console.log輸出的超鏈接會(huì)被自動(dòng)識(shí)別并加上灰色字體顏色和下劃線的樣式，而這個(gè)無(wú)法用%c覆蓋

圖片輸出

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

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

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

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

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

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

那些兄妹

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

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

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

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

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

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

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

鄰居們

其實(shí)除了打印調(diào)試信息外，console還有不少?gòu)?qiáng)大有用但卻很低調(diào)的接口。

console.time & console.timeEnd

這是性能調(diào)試的利器啊，熟悉NodeJs的童鞋更是清楚。肯定不少童鞋干過(guò)這事：在我們的某塊代碼前新增一個(gè)類(lèi)似startTime的變量，給它一個(gè)時(shí)間戳，然后在我們執(zhí)行完代碼后，再打一個(gè)時(shí)間戳，再將兩者相減，再將結(jié)果輸出?，F(xiàn)在我們使用上面的函數(shù)，就可以省下很多功夫了：

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

console.count

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

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

console.assert

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

不消說(shuō)，使用該函數(shù)可以讓我們?cè)谀承┑胤街辉诜夏硞€(gè)條件才進(jìn)行調(diào)試輸出，使輸出更加干凈。當(dāng)然你也可以用if語(yǔ)句，不過(guò)寫(xiě)起來(lái)就麻煩了一些。

console.group

一看就知道是分組輸出：

而且這個(gè)分組還可以嵌套的：

顯然這個(gè)函數(shù)特別適合有一大堆調(diào)試輸出的情況，做大項(xiàng)目估計(jì)會(huì)用上。不過(guò)有時(shí)你打開(kāi)控制臺(tái)看到滿屏滿屏的輸出你也會(huì)很頭痛的，于是你可以分組輸出且默認(rèn)收起：

console.clear

最后的最后，該清場(chǎng)了。

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

總結(jié)

我是王大錘，萬(wàn)萬(wàn)沒(méi)想到，console.log的八卦就這樣被我說(shuō)完了，本以為還可以吹水個(gè)幾萬(wàn)字。

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

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

最新評(píng)論