控制臺應(yīng)該是大多數(shù)前端開發(fā)人員日常開發(fā)調(diào)試離不開的神器。然而控制臺仍有很多不為人知的屬性及方法，能讓你更爽地使用，當(dāng)然也包括了一些隱藏的深坑(console.log對象打印bug)...
* 本文探討的是chrome開發(fā)工具中的控制臺，其他瀏覽器也許存在不同的表現(xiàn)，此文不涉獵
Try it first！
開始前，讓我們來造一個(gè)馬里奧！
打開開發(fā)者工具的控制臺，將下述代碼復(fù)制粘貼，然后猛敲回車！
!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? null : (function() {
var args = [], eightBitHack = [], coordinates = ["41n8r2", "42t3wu", "449u8a", "4h4014", "4h2c4y", "4g6ia1", "4286dm", "447r6w", "4fudcv", "61z2xp", "70rmyd", "71sfq1", "6zgplp", "42spfv", "4frvnp", "61wzpd"];
for (var row = coordinates.length; row--;) {
var decompressedRow = parseInt(coordinates[row], 36).toString(5).split('');
coordinates[row] = decompressedRow.splice(1, decompressedRow.length-1);
for (var cell = coordinates[row].length; cell--;) {
var dot = parseInt(coordinates[row][cell]);
var color = dot === 4 ? '#ecd585' : dot === 3 ? '#e1c25b' : dot === 2 ? '#805936' : dot ? '#ec2733' : '#fff';
args.unshift("border: 8px solid color;".replace('color', color));
eightBitHack.unshift("%c");
}
eightBitHack.unshift("\n");
}
eightBitHack.push("%c\n\n\n", "\nIt's me, Mario!", "\nmade by %chttps://twitter.com/aristretto");
args.push("font-weight: bold;", "font-weight: bold; color: teal;");
args.unshift(eightBitHack.join(''));
console.log.apply(console, args);
})();
可以看到，一個(gè)充滿色彩的馬里奧出現(xiàn)在了控制臺，主要是使用了以下命令實(shí)現(xiàn)：
console.log('%c','/*css*/');
*當(dāng)然這里面還有到了其他的trick處理方式，詳情請看作者鏈接
控制臺進(jìn)階玩法
從上述的例子可以看出，控制臺還有很多我們不知道的進(jìn)階玩法，如輸出更好的格式，利用一些trick，使得我們的調(diào)試更具效率。
Console API
在控制臺中輸入console.可以看出，console中有很多方法可以調(diào)用，網(wǎng)上已有很多資源說明，此次僅提及幾個(gè)比較有用的API
console.log(object[,object,...])
console.log除了常見的將需要輸出的結(jié)果直接傳入第一個(gè)參數(shù)中，還有以下用法：
- 使用逗號分隔，傳入多個(gè)參數(shù)輸出
輸出時(shí)會(huì)將每個(gè)逗號自動(dòng)替換成空格
console.log('Hello','world!\t','Current Time:',Date.now());
// Hello world! Current Time: 1530694211342
- 使用說明符輸出，類似于C++中的
print函數(shù)
除了一般的%s（字符串）、%i``%d（均為整型）、%f外，還支持%c（樣式）、%o（DOM元素）、%O（JavaScript對象）輸出
console.log('Hello world!\t%s: %i','Current Time',Date.now());
console.log("normal text,%c large blue text,%c white text with black background ", "color: blue; font-size: x-large","color:white;background:black;");
console.log('%o\n%O',document,{a:1,b:2,c:3});
上述代碼輸出結(jié)果見下圖：
console.count
寫入在同一行使用相同標(biāo)簽調(diào)用count()的次數(shù)，可用于某些setInterval或者事件重復(fù)觸發(fā)的調(diào)試。
const fn = function(name){
console.count(name);
};
fn('Bob'); // Bob: 1
fn('John'); // John: 1
fn('Bob'); // Bob: 2
fn('Bob'); // Bob: 3
console.error trace
輸出一條消息，并包含了調(diào)用該方法的地方的堆棧信息。區(qū)別是error會(huì)將消息設(shè)置成錯(cuò)誤的樣式。
(()=>{
const fn1 = (fn)=>{
fn();
};
const fn2 = ()=>{
console.trace('Target Not Found');
console.error('Target Not Found');
};
fn1(fn2);
})();
上述代碼輸出結(jié)果見下圖：
console.time timeEnd
啟動(dòng)一個(gè)具有關(guān)聯(lián)標(biāo)簽的新計(jì)時(shí)器。使用相同標(biāo)簽調(diào)用console.timeEnd()時(shí)，定時(shí)器將停止，經(jīng)過的時(shí)間將顯示在控制臺中。計(jì)時(shí)器值精確到亞毫秒。傳遞到time()和timeEnd()的字符串必須匹配，否則計(jì)時(shí)器不會(huì)結(jié)束。
可用于分析某段代碼的時(shí)間消耗。
console.time('test');
for(let i = 0; i < 100000000; i++){}
console.timeEnd('test');
// 輸出：
// test: 122.71923828125ms
others
此外，還有很多好用的Console API，如console.table、console.group、console.assert等。可以在Chrome的Console API文檔中找到他們的使用方法.
Command Line API
嘗試一下，在一個(gè)未引入jQuery和zepto的頁面的控制臺中，直接輸入$、$$會(huì)出現(xiàn)什么？
// 直接打開控制臺輸入
console.log($,$$);
// 輸出：
// ? $(selector, [startNode]) { [Command Line API] } ? $$(selector, [startNode]) { [Command Line API] }
可以看到，輸出的函數(shù)中，包含了[Command Line API]。Command Line API 是由控制臺提供的一系列便捷函數(shù)集合，大概的功能有：選擇和檢查 DOM 元素，以可讀格式顯示數(shù)據(jù)，停止和啟動(dòng)分析器，以及監(jiān)控 DOM 事件。
* 注1：此類API僅通過控制臺本身獲取，在JS代碼中帶上此類代碼會(huì)報(bào)錯(cuò)。
* 注2：若全局已覆蓋了相同名稱的方法，則此類方法將被覆蓋。
$、$$
$(selector)等同于document.querySelector，同樣的，$(selector)等同于document.querySelectorAll。Command Line API只是提供了較快捷的方式便于開發(fā)者進(jìn)行調(diào)試。
$0-$4
$0、$1、$2、$3和$4命令用作在 Elements 面板中檢查的最后五個(gè)DOM元素或在 Profiles面板中選擇的最后五個(gè)JavaScript堆對象的歷史參考。$0返回最近一次選擇的元素或JavaScript對象，$1返回僅在最近一次之前選擇的元素或?qū)ο螅来祟愅啤?br>
以下結(jié)果是在測試頁面上依次點(diǎn)擊html標(biāo)簽、head標(biāo)簽、meta標(biāo)簽的結(jié)果：
others
此外，還有很多好用的Command Line API，如copy、debug、monitor、profile等。可以在Chrome的Command Line API文檔中找到他們的使用方法.
控制臺的坑
試想一下以下代碼在控制臺中輸出的結(jié)果：
const fn = function(length){
const o = {
arr: [],
key1: 'test',
key2: 'test',
key3: 'test',
key4: 'test',
key5: 'test',
index: 0
};
console.log(JSON.stringify(o));
console.log(o);
console.log('Handling data');
for(let i = 0; i < length; i++){
o.arr.push(i);
}
o.index = length;
console.log(JSON.stringify(o));
console.log(o);
};
fn(5);
不難看出，控制臺中輸出的結(jié)果應(yīng)該如下圖：
此時(shí)，我們展開一下第二行與第五行，會(huì)發(fā)現(xiàn)一個(gè)很奇怪的現(xiàn)象：
展開第二行發(fā)現(xiàn)，arr里的長度是5，對象的index值居然是5！
延時(shí)計(jì)算
定位上述的問題，只需要將鼠標(biāo)移至行尾的藍(lán)色info標(biāo)記上，控制臺會(huì)提示以下內(nèi)容：
Value below was evaluated just now.
這句話意味著，展開當(dāng)前的object的時(shí)候，控制臺才會(huì)去計(jì)算出這個(gè)對象的key-value，再反饋到控制臺中顯示。
原來使用Console打印的時(shí)候，若發(fā)現(xiàn)當(dāng)前需要打印的內(nèi)容是一個(gè)對象，會(huì)將其保存下來，在控制臺中先輸出一個(gè)簡要的快照（Snapshot），待開發(fā)者需要查看其中詳細(xì)內(nèi)容時(shí)，再點(diǎn)擊展開，返回內(nèi)存中的值。
這個(gè)是控制臺的一個(gè)已知的坑點(diǎn)，有可能設(shè)計(jì)該功能是為了避免控制臺對大對象深復(fù)制輸出，導(dǎo)致調(diào)試過慢，也有可能是為了方便查看原型鏈上的屬性，但這無疑是開發(fā)者調(diào)試代碼時(shí)需要避開的問題。
要避免這種調(diào)試問題，建議使用JSON.stringify()進(jìn)行輸出調(diào)試，而不是直接打印當(dāng)前對象。
內(nèi)存泄漏問題
上面提到，使用Console打印對象時(shí)，會(huì)將這個(gè)對象的引用保存下來。由于開發(fā)者工具在瀏覽器中默認(rèn)開啟，且默認(rèn)了“開發(fā)者之后需要查看該對象”的行為，就會(huì)導(dǎo)致在Console中引入的對象是不會(huì)進(jìn)入GC（垃圾回收）邏輯中的，這就引發(fā)了內(nèi)存泄漏問題。
要避免內(nèi)存泄漏問題，需要將開發(fā)環(huán)境與線上環(huán)境進(jìn)行分離，線上環(huán)境中避免產(chǎn)生控制臺打印的語句，亦可以在項(xiàng)目打包時(shí)，將ESLint中的no-console的開關(guān)打開。
參考及拓展
https://medium.com/@aristretto/8-bit-fun-with-console-log-7905d87e8b9d
https://developers.google.com/web/tools/chrome-devtools/
https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects
