[[218407]]

Console對象提供對瀏覽器控制臺的接入（如：Firefox 的 Web Console）。不同瀏覽器上它的工作方式是不一樣的，但這里會介紹一些大都會提供的接口特性。

Console對象可以在任何全局對象中訪問，如 Window，WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。

它被瀏覽器定義為 Window.Console，也可被簡單的 Console 調(diào)用。

最常用的方法就是Console.log(),就是在控制臺輸出內(nèi)容。剛開始學(xué)前端的時(shí)候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法，難道Console真的沒有別的用法了？查了一下后發(fā)現(xiàn)Console還是非常強(qiáng)大的，至于為什么很少看到有人用可能是因?yàn)橛眠^都刪掉了吧。在此記錄一下Console的其他用法。

注意：因?yàn)镃onsole 對象提供對瀏覽器控制臺的接入 所以在不同瀏覽器中的支持及表現(xiàn)形式可能不太一樣，但是調(diào)試內(nèi)容只有我們開發(fā)者會看，所以保證開發(fā)環(huán)境能用這些方法就可以了，下面演示全部都為Chrome上面的效果。

分類輸出

不同類別信息的輸出 

console.log('文字信息');  
console.info('提示信息');  
console.warn('警告信息');  
console.error('錯(cuò)誤信息'); 

分組輸出

使用Console.group()和Console.groupEnd()包裹分組內(nèi)容。

還可以使用Console.groupCollapsed()來代替Console.group()生成折疊的分組。 

console.group('第一個(gè)組');  
    console.log("1-1");  
    console.log("1-2");  
    console.log("1-3");  
console.groupEnd();  
console.group('第二個(gè)組');  
    console.log("2-1");  
    console.log("2-2");  
    console.log("2-3");  
console.groupEnd();  

Console.group()還可以嵌套使用  

console.group('第一個(gè)組');  
    console.group("1-1");  
        console.group("1-1-1");  
            console.log('內(nèi)容');  
        console.groupEnd();  
    console.groupEnd();  
    console.group("1-2");  
        console.log('內(nèi)容');  
        console.log('內(nèi)容');  
        console.log('內(nèi)容');  
    console.groupEnd();  
console.groupEnd(); 
 console.groupCollapsed('第二個(gè)組');  
    console.group("2-1");  
    console.groupEnd();  
    console.group("2-2");  
    console.groupEnd();  
console.groupEnd(); 

表格輸出

使用console.table()可以將傳入的對象，或數(shù)組以表格形式輸出。適合排列整齊的元素 

var Obj = {  
    Obj1: {  
        a: "aaa",  
        b: "bbb",  
        c: "ccc"  
    }, 
 
    Obj2: {  
        a: "aaa",  
        b: "bbb",  
        c: "ccc"  
    }, 
 
    Obj3: {  
        a: "aaa",  
        b: "bbb",  
        c: "ccc"  
    }, 
 
    Obj4: {  
        a: "aaa",  
        b: "bbb",  
        c: "ccc"  
    } 
 }  
 
 
console.table(Obj);  
 
var Arr = [  
    ["aa","bb","cc"],  
    ["dd","ee","ff"],  
    ["gg","hh","ii"],  
]   
console.table(Arr); 

查看對象

使用Console.dir()顯示一個(gè)對象的所有屬性和方法

在Chrome中Console.dir()和Console.log()效果相同 

var CodeDeer = {  
    nema: 'CodeDeer',  
    blog: 'www.xluos.com',   
 }  
console.log("console.dir(CodeDeer)");  
console.dir(CodeDeer);  
console.log("console.log(CodeDeer)");  
console.log(CodeDeer); 

查看節(jié)點(diǎn)

使用Console.dirxml()顯示一個(gè)對象的所有屬性和方法

在Chrome中Console.dirxml()和Console.log()效果相同

百度首頁logo的節(jié)點(diǎn)信息

條件輸出

利用console.assert(),可以進(jìn)行條件輸出。

• 當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為真時(shí)，不輸出內(nèi)容
• 當(dāng)?shù)谝粋€(gè)參數(shù)或返回值為假時(shí)，輸出后面的內(nèi)容并拋出異常 

console.assert(true, "你永遠(yuǎn)看不見我"); 
 
console.assert((function() { return true;})(), "你永遠(yuǎn)看不見我"); 
 
console.assert(false, "你看得見我"); 
 
console.assert((function() { return false;})(), "你看得見我"); 

計(jì)次輸出

使用Console.count()輸出內(nèi)容和被調(diào)用的次數(shù)

(function () {  
    for(var i = 0; i < 3; i++){  
        console.count("運(yùn)行次數(shù)：");  
    }  
})() 

追蹤調(diào)用堆棧

使用Console.trace()來追蹤函數(shù)被調(diào)用的過程，在復(fù)雜項(xiàng)目時(shí)調(diào)用過程非常多，用這個(gè)命令來幫你縷清。

function add(a, b) {  
    console.trace("Add function");  
    return a + b;  
}  
function add3(a, b) {  
    return add2(a, b);  
}  
function add2(a, b) {  
    return add1(a, b);  
} 
 
function add1(a, b) {  
    return add(a, b);  
}  
var x = add3(1, 1); 

計(jì)時(shí)功能

使用Console.time()和Console.timeEnd()包裹需要計(jì)時(shí)的代碼片段，輸出運(yùn)行這段代碼的事件。

• Console.time()中的參數(shù)作為計(jì)時(shí)器的標(biāo)識，具有唯一性。
• Console.timeEnd()中的參數(shù)來結(jié)束此標(biāo)識的計(jì)時(shí)器，并以毫秒為單位返回運(yùn)行時(shí)間。
• 最多同時(shí)運(yùn)行10000個(gè)計(jì)時(shí)器。 

console.time("Chrome中循環(huán)1000次的時(shí)間");  
for(var i = 0; i < 1000; i++)  
{ 
}  
console.timeEnd("Chrome中循環(huán)1000次的時(shí)間"); 

性能分析

使用Console.profile()和Console.profile()進(jìn)行性能分析，查看代碼各部分運(yùn)行消耗的時(shí)間，但是我在Chrome自帶的調(diào)試工具中并沒有找到在哪里查看這兩個(gè)方法生成的分析報(bào)告。應(yīng)該需要其他的調(diào)試工具。

具體參考這里：

http://www.oschina.net/transl...

有趣的Console.log()

最后再來介紹一下強(qiáng)大的Console.log(),這個(gè)方法有很多的用法（其他輸出方法的用法，如error()等，可以參照log()使用）。

一、提示輸出

可以再輸出的對象、變量前加上提示信息，增加辨識度 

var ans = 12345;  
console.log("這是臨時(shí)變量ans的值：",ans); 

二、格式化輸出

占位符 含義

%s 字符串輸出

%d or %i 整數(shù)輸出

%f 浮點(diǎn)數(shù)輸出

%o 打印javascript對象，可以是整數(shù)、字符串以及JSON數(shù)據(jù)

樣例： 

var arr = ["小明", "小紅"]; 
console.log("歡迎%s和%s兩位新同學(xué)",arr[0],arr[1]);  
console.log("圓周率整數(shù)部分：%d，帶上小數(shù)是：%f",3.1415,3.1415); 

三、自定義樣式

使用%c為打印內(nèi)容定義樣式,再輸出信息前加上%c，后面寫上標(biāo)準(zhǔn)的css樣式，就可以為輸出的信息添加樣式了 

console.log("%cMy stylish message", "color: red; font-style: italic"); 
 
console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em"); 
 
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;'); 
 
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;'); 

總結(jié)

Console的用法很多，有些再調(diào)試過程中非常實(shí)用，可以節(jié)省很多時(shí)間。當(dāng)然我知道debug還是用斷點(diǎn)調(diào)試的方法比較好，但是小問題用“printf大法”也是很好用的（滑稽臉）。

參考資料

• https://developer.mozilla.org...
• http://www.jb51.net/article/5...
• https://segmentfault.com/a/11...
• https://www.cnblogs.com/liyun...