對于js的調(diào)試，一般我們經(jīng)常用alert()或者console.log()進(jìn)行調(diào)試。但是alert()會讓程序中斷，而console.log()則不會。雖然用的很多，但是我就只知道console.log()而已。今天專門去研究一下這個(gè)東西console。

JS原生中默認(rèn)是沒有console對象,這是宿主對象（也就是游覽器）提供的內(nèi)置對象。 用于訪問調(diào)試控制臺, 在不同的瀏覽器里效果可能不同。

比如：現(xiàn)在大部分的游覽器都是帶有調(diào)試功能的。而低版本的IE就沒有，所以在低版本IE的window中，console對象并不存在?！舅赃€需要低版本支持的朋友要注意】。

打印window對象中的console：

Paste_Image.png

接下來打印一下console都有一些什么功能：

這是谷歌和火狐for(var i in console){console.log(i)}出來，對應(yīng)游覽器所支持的console方法：

Paste_Image.png

Paste_Image.png

console 的方法

console.log(),console.debug(),console.info()

console.log方法用于在控制臺輸出信息。它可以接受多個(gè)參數(shù)，逗號分隔。它會自動在每次輸出的結(jié)尾，添加換行符。沒有返回值回會返回undefined。【console.log大家用的很熟的】

Paste_Image.png

如果第一個(gè)參數(shù)是格式字符串（使用了格式占位符），console.log方法將依次用后面的參數(shù)替換占位符，然后再進(jìn)行輸出。

Paste_Image.png

占位符格式如下表：

模式類型

%s字符串

%d,%i整數(shù)

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

%o對象超鏈接

%cCSS格式化樣式

console.log方法和console.debug()與console.info()，幾乎用法完全一樣，唯一不同的就是現(xiàn)實(shí)時(shí)候的表現(xiàn)形式了。

注意一點(diǎn)的是：IE不支持debug()方法

Paste_Image.png

console.assert()

接收至少兩個(gè)參數(shù)，第一個(gè)參數(shù)的值或返回值為false的時(shí)候，將會在控制臺上拋出一個(gè)異常并將其余參數(shù)作為異常描述輸出.

console.assert(false,123)//拋出錯(cuò)誤，并且輸出，返回undefinedconsole.assert(true,123)//沒有錯(cuò)誤，返回undefined

Paste_Image.png

console.count()

console.count()方法用于計(jì)數(shù)，輸出它被調(diào)用了多少次。

(function() { for (vari =0; i < 5; i++) {console.count('count');}})();

Paste_Image.png

console.count()方法里面可以傳入一個(gè)字符串作為參數(shù)，作為標(biāo)簽，對執(zhí)行次數(shù)進(jìn)行分類

functiongreet(user){console.count(user);return"hi "+ user;}greet('bob')greet('alice')greet('bob')

Paste_Image.png

console.clear()

console.clear()清空控制臺內(nèi)容。

console.dir()

console.dir()方法用來對一個(gè)對象進(jìn)行檢查，并以易于閱讀和打印的格式顯示。

varobj = {? ? name:'c',? ? age:'20',type:'1'};console.dir(obj);vararr = [1,2,3]console.dir(arr)vars ='sdfs'console.dir(s)varn ='123'console.dir(n)

Paste_Image.png

Paste_Image.png

console.error(),console.warn()

console.error(),console.warn()方法用于輸出錯(cuò)誤和警告信息，用法和常見的console.log方法一樣，不同點(diǎn)在于輸出時(shí)候的表現(xiàn)形式。一個(gè)是黃色的警告形式一個(gè)是紅色的錯(cuò)誤形式。而console.error()方法會標(biāo)記為錯(cuò)誤的地方。

Paste_Image.png

console.table()

console.table()方法可以將傳入的對象或數(shù)組這些復(fù)合數(shù)據(jù)以表格形式輸出。

vararr= [? ? ? ? ? {num:"1"},? ? ? ? {num:"2"},? ? ? ? ? {num:"3"}? ? ];? console.table(arr);varobj= {? ? ? a:{num:"1"},? ? ? b:{num:"2"},? ? ? c:{num:"3"}? };? console.table(obj);

Paste_Image.png

Paste_Image.png

console.time(),console.timeEnd()

console.time(),console.timeEnd()方法計(jì)算一個(gè)操作的執(zhí)行的時(shí)間console.time()是開始，console.timeEnd()是結(jié)束。可以傳一個(gè)參數(shù)，參數(shù)為計(jì)時(shí)器的名稱。

console.time('計(jì)時(shí)器1');for(vari =0; i <100; i++) {for(varj =0; j <100; j++) {}? }console.timeEnd('計(jì)時(shí)器1');console.time('計(jì)時(shí)器2');for(vari =0; i <1000; i++) {for(varj =0; j <1000; j++) {}? }console.timeEnd('計(jì)時(shí)器2');

Paste_Image.png

console.group(),console.groupCollapsed(),console.groupend()

console.group()和console.groupCollapsed()這兩個(gè)方法用于將顯示的信息分組，可以把信息進(jìn)行折疊和展開。他們都可以傳遞一個(gè)參數(shù)，參數(shù)默認(rèn)是分組名。

用法都是一樣的。唯一區(qū)別就是console.group()是默認(rèn)展開的，而console.groupCollapsed()默認(rèn)是收起的。

console.group('第一層');console.group('第二層');console.log('error');console.error('error');console.warn('error');console.groupEnd();console.groupEnd();

Paste_Image.png

console.groupCollapsed('第一層');console.groupCollapsed('第二層');console.log('error');console.error('error');console.warn('error');console.groupEnd();console.groupEnd();

Paste_Image.png

console.profile(),console.profileEnd()

console.profile(),console.profileEnd()方法就比較高大上點(diǎn)了，用來新建一個(gè)性能測試器，可以評估某段代碼的性能，可以傳一個(gè)參數(shù)，為生成的性能測試器的名字。

functionprofile(){for(vari =0; i <10000; i++) {? ? ? ? i++;? ? }}console.profile('性能分析');? ? profile();console.profileEnd();

Paste_Image.png

profile在哪里呢。打開控制臺。Profile就是了。也可手動添加

Paste_Image.png

console.trace()

console.trace()方法用來追蹤函數(shù)的調(diào)用過程。在復(fù)雜的架構(gòu)中可以查找到對應(yīng)的調(diào)用路徑。

functiond(a){console.trace();returna;}functionb(a){returnc(a);}functionc(a){returnd(a); }vara = b('123');

Paste_Image.png

PS：很多互聯(lián)網(wǎng)公司都會在頁面中寫類似的推廣呀，招聘呀。。。

Paste_Image.png

試著在你的網(wǎng)站寫寫類似的語句，說不定哪天，那個(gè)程序媛審查一下元素，就和你去拯救世界了呢。O(∩_∩)O~

varcons= console;if(cons) {cons.log('想和我共同保護(hù)世界，維護(hù)世界的和平嗎？\n');cons.log("請?jiān)卩]件中注明：%c來自:浩3108的簡書","color:red;font-weight:bold;");}

暫時(shí)告一段。