挖掘Chrome Console的小秘密
控制台應該是大多數前端開發人員日常開發調試離不開的神器。然而控制台仍有很多不為人知的屬性及方法，能讓你更爽地使用，當然也包括了一些隱藏的深坑(console.log對象打印bug)...
* 本文探討的是chrome開發工具中的控制台，其他瀏覽器也許存在不同的表現，此文不涉獵
Try it first！
開始前，讓我們來造一個馬里奧！
打開開發者工具的控制台，將下述代碼復制粘貼，然后猛敲回車！
!(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); })(); 可以看到，一個充滿色彩的馬里奧出現在了控制台，主要是使用了以下命令實現：
console.log('%c','/*css*/');
*當然這里面還有到了其他的trick處理方式，詳情請看作者鏈接
控制台進階玩法
從上述的例子可以看出，控制台還有很多我們不知道的進階玩法，如輸出更好的格式，利用一些trick，使得我們的調試更具效率。
Console API
在控制台中輸入console.可以看出，console中有很多方法可以調用，網上已有很多資源說明，此次僅提及幾個比較有用的API
console.log(object[,object,...])
console.log除了常見的將需要輸出的結果直接傳入第一個參數中，還有以下用法：
- 使用逗號分隔，傳入多個參數輸出
輸出時會將每個逗號自動替換成空格
console.log('Hello','world!\t','Current Time:',Date.now()); // Hello world! Current Time: 1530694211342 - 使用說明符輸出，類似於C++中的
print函數
除了一般的%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}); 上述代碼輸出結果見下圖：
console.count
寫入在同一行使用相同標簽調用count()的次數，可用於某些setInterval或者事件重復觸發的調試。
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
輸出一條消息，並包含了調用該方法的地方的堆棧信息。區別是error會將消息設置成錯誤的樣式。
(()=>{ const fn1 = (fn)=>{ fn(); }; const fn2 = ()=>{ console.trace('Target Not Found'); console.error('Target Not Found'); }; fn1(fn2); })(); 上述代碼輸出結果見下圖：
console.time timeEnd
啟動一個具有關聯標簽的新計時器。使用相同標簽調用console.timeEnd()時，定時器將停止，經過的時間將顯示在控制台中。計時器值精確到亞毫秒。傳遞到time()和timeEnd()的字符串必須匹配，否則計時器不會結束。
可用於分析某段代碼的時間消耗。
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
嘗試一下，在一個未引入jQuery和zepto的頁面的控制台中，直接輸入$、$$會出現什么？
// 直接打開控制台輸入 console.log($,$$); // 輸出： // ƒ $(selector, [startNode]) { [Command Line API] } ƒ $$(selector, [startNode]) { [Command Line API] } 可以看到，輸出的函數中，包含了[Command Line API]。Command Line API 是由控制台提供的一系列便捷函數集合，大概的功能有：選擇和檢查 DOM 元素，以可讀格式顯示數據，停止和啟動分析器，以及監控 DOM 事件。
* 注1：此類API僅通過控制台本身獲取，在JS代碼中帶上此類代碼會報錯。
* 注2：若全局已覆蓋了相同名稱的方法，則此類方法將被覆蓋。
$、$$
$(selector)等同於document.querySelector，同樣的，$(selector)等同於document.querySelectorAll。Command Line API只是提供了較快捷的方式便於開發者進行調試。
$0-$4
$0、$1、$2、$3和$4命令用作在 Elements 面板中檢查的最后五個DOM元素或在 Profiles面板中選擇的最后五個JavaScript堆對象的歷史參考。$0返回最近一次選擇的元素或JavaScript對象，$1返回僅在最近一次之前選擇的元素或對象，依此類推。
以下結果是在測試頁面上依次點擊html標簽、head標簽、meta標簽的結果：
others
此外，還有很多好用的Command Line API，如copy、debug、monitor、profile等。可以在Chrome的Command Line API文檔中找到他們的使用方法.
控制台的坑
試想一下以下代碼在控制台中輸出的結果：
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); 不難看出，控制台中輸出的結果應該如下圖：
此時，我們展開一下第二行與第五行，會發現一個很奇怪的現象：
展開第二行發現，arr里的長度是5，對象的index值居然是5！
延時計算
定位上述的問題，只需要將鼠標移至行尾的藍色info標記上，控制台會提示以下內容：Value below was evaluated just now.
這句話意味着，展開當前的object的時候，控制台才會去計算出這個對象的key-value，再反饋到控制台中顯示。
原來使用Console打印的時候，若發現當前需要打印的內容是一個對象，會將其保存下來，在控制台中先輸出一個簡要的快照（Snapshot），待開發者需要查看其中詳細內容時，再點擊展開，返回內存中的值。
這個是控制台的一個已知的坑點，有可能設計該功能是為了避免控制台對大對象深復制輸出，導致調試過慢，也有可能是為了方便查看原型鏈上的屬性，但這無疑是開發者調試代碼時需要避開的問題。
要避免這種調試問題，建議使用JSON.stringify()進行輸出調試，而不是直接打印當前對象。
內存泄漏問題
上面提到，使用Console打印對象時，會將這個對象的引用保存下來。由於開發者工具在瀏覽器中默認開啟，且默認了“開發者之后需要查看該對象”的行為，就會導致在Console中引入的對象是不會進入GC（垃圾回收）邏輯中的，這就引發了內存泄漏問題。
要避免內存泄漏問題，需要將開發環境與線上環境進行分離，線上環境中避免產生控制台打印的語句，亦可以在項目打包時，將ESLint中的no-console的開關打開。
參考及拓展
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