挖掘Chrome Console的小秘密

控制臺應該是大多數(shù)前端開發(fā)人員日常開發(fā)調試離不開的神器。然而控制臺仍有很多不為人知的屬性及方法，能讓你更爽地使用，當然也包括了一些隱藏的深坑(console.log對象打印bug)...
* 本文探討的是chrome開發(fā)工具中的控制臺，其他瀏覽器也許存在不同的表現(xiàn)，此文不涉獵

Try it first！

開始前，讓我們來造一個馬里奧！
打開開發(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);
})();

可以看到，一個充滿色彩的馬里奧出現(xiàn)在了控制臺，主要是使用了以下命令實現(xiàn)：

console.log('%c','/*css*/');

Mario

*當然這里面還有到了其他的trick處理方式，詳情請看作者鏈接

控制臺進階玩法

從上述的例子可以看出，控制臺還有很多我們不知道的進階玩法，如輸出更好的格式，利用一些trick，使得我們的調試更具效率。

Console API

在控制臺中輸入console.可以看出，console中有很多方法可以調用，網上已有很多資源說明，此次僅提及幾個比較有用的API

console.log(object[,object,...])

console.log除了常見的將需要輸出的結果直接傳入第一個參數(shù)中，還有以下用法：

  • 使用逗號分隔，傳入多個參數(shù)輸出
    輸出時會將每個逗號自動替換成空格
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});

上述代碼輸出結果見下圖：


console.log with format

console.count

寫入在同一行使用相同標簽調用count()的次數(shù)，可用于某些setInterval或者事件重復觸發(fā)的調試。

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

輸出一條消息，并包含了調用該方法的地方的堆棧信息。區(qū)別是error會將消息設置成錯誤的樣式。

(()=>{
    const fn1 = (fn)=>{
        fn();
    };
    const fn2 = ()=>{
        console.trace('Target Not Found');
        console.error('Target Not Found');
    };
    fn1(fn2);
})();

上述代碼輸出結果見下圖：


console.error

console.time timeEnd

啟動一個具有關聯(lián)標簽的新計時器。使用相同標簽調用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等?？梢栽贑hrome的Console API文檔中找到他們的使用方法.

Command Line API

嘗試一下，在一個未引入jQuery和zepto的頁面的控制臺中，直接輸入$、$$會出現(xiàn)什么？

// 直接打開控制臺輸入
console.log($,$$);
// 輸出：
// ? $(selector, [startNode]) { [Command Line API] } ? $$(selector, [startNode]) { [Command Line API] }

可以看到，輸出的函數(shù)中，包含了[Command Line API]。Command Line API 是由控制臺提供的一系列便捷函數(shù)集合，大概的功能有：選擇和檢查 DOM 元素，以可讀格式顯示數(shù)據，停止和啟動分析器，以及監(jiān)控 DOM 事件。
* 注1：此類API僅通過控制臺本身獲取，在JS代碼中帶上此類代碼會報錯。
* 注2：若全局已覆蓋了相同名稱的方法，則此類方法將被覆蓋。

$、$$

$(selector)等同于document.querySelector，同樣的，$(selector)等同于document.querySelectorAll。Command Line API只是提供了較快捷的方式便于開發(fā)者進行調試。

$0-$4

$0、$1、$2、$3和$4命令用作在 Elements 面板中檢查的最后五個DOM元素或在 Profiles面板中選擇的最后五個JavaScript堆對象的歷史參考。$0返回最近一次選擇的元素或JavaScript對象，$1返回僅在最近一次之前選擇的元素或對象，依此類推。
以下結果是在測試頁面上依次點擊html標簽、head標簽、meta標簽的結果：

$0 - $4

others

此外，還有很多好用的Command Line API，如copy、debug、monitor、profile等?？梢栽贑hrome的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);

不難看出，控制臺中輸出的結果應該如下圖：


console with complex object

此時，我們展開一下第二行與第五行，會發(fā)現(xiàn)一個很奇怪的現(xiàn)象：


object expand

展開第二行發(fā)現(xiàn)，arr里的長度是5，對象的index值居然是5！

延時計算

定位上述的問題，只需要將鼠標移至行尾的藍色info標記上，控制臺會提示以下內容：
Value below was evaluated just now.
這句話意味著，展開當前的object的時候，控制臺才會去計算出這個對象的key-value，再反饋到控制臺中顯示。
原來使用Console打印的時候，若發(fā)現(xiàn)當前需要打印的內容是一個對象，會將其保存下來，在控制臺中先輸出一個簡要的快照（Snapshot），待開發(fā)者需要查看其中詳細內容時，再點擊展開，返回內存中的值。
這個是控制臺的一個已知的坑點，有可能設計該功能是為了避免控制臺對大對象深復制輸出，導致調試過慢，也有可能是為了方便查看原型鏈上的屬性，但這無疑是開發(fā)者調試代碼時需要避開的問題。
要避免這種調試問題，建議使用JSON.stringify()進行輸出調試，而不是直接打印當前對象。

內存泄漏問題

上面提到，使用Console打印對象時，會將這個對象的引用保存下來。由于開發(fā)者工具在瀏覽器中默認開啟，且默認了“開發(fā)者之后需要查看該對象”的行為，就會導致在Console中引入的對象是不會進入GC（垃圾回收）邏輯中的，這就引發(fā)了內存泄漏問題。
要避免內存泄漏問題，需要將開發(fā)環(huán)境與線上環(huán)境進行分離，線上環(huán)境中避免產生控制臺打印的語句，亦可以在項目打包時，將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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容