對于js的調試,一般我們經常用alert()或者console.log()進行調試。但是alert()會讓程序中斷,而console.log()則不會。雖然用的很多,但是我就只知道console.log()而已。今天專門去研究一下這個東西console。
JS原生中默認是沒有console對象,這是宿主對象(也就是游覽器)提供的內置對象。 用于訪問調試控制臺, 在不同的瀏覽器里效果可能不同。
比如:現在大部分的游覽器都是帶有調試功能的。而低版本的IE就沒有,所以在低版本IE的window中,console對象并不存在。【所以還需要低版本支持的朋友要注意】。
打印window對象中的console:
Paste_Image.png
接下來打印一下console都有一些什么功能:
這是谷歌和火狐for(var i in console){console.log(i)}出來,對應游覽器所支持的console方法:
Paste_Image.png
Paste_Image.png
console 的方法
console.log(),console.debug(),console.info()
console.log方法用于在控制臺輸出信息。它可以接受多個參數,逗號分隔。它會自動在每次輸出的結尾,添加換行符。沒有返回值回會返回undefined。【console.log大家用的很熟的】
Paste_Image.png
如果第一個參數是格式字符串(使用了格式占位符),console.log方法將依次用后面的參數替換占位符,然后再進行輸出。
Paste_Image.png
占位符格式如下表:
模式類型
%s字符串
%d,%i整數
%f浮點數
%o對象超鏈接
%cCSS格式化樣式
console.log方法和console.debug()與console.info(),幾乎用法完全一樣,唯一不同的就是現實時候的表現形式了。
注意一點的是:IE不支持debug()方法
Paste_Image.png
console.assert()
接收至少兩個參數,第一個參數的值或返回值為false的時候,將會在控制臺上拋出一個異常并將其余參數作為異常描述輸出.
console.assert(false,123)//拋出錯誤,并且輸出,返回undefinedconsole.assert(true,123)//沒有錯誤,返回undefined
Paste_Image.png
console.count()
console.count()方法用于計數,輸出它被調用了多少次。
(function() { for (vari =0; i < 5; i++) {console.count('count');}})();
Paste_Image.png
console.count()方法里面可以傳入一個字符串作為參數,作為標簽,對執行次數進行分類
functiongreet(user){console.count(user);return"hi "+ user;}greet('bob')greet('alice')greet('bob')
Paste_Image.png
console.clear()
console.clear()清空控制臺內容。
console.dir()
console.dir()方法用來對一個對象進行檢查,并以易于閱讀和打印的格式顯示。
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()方法用于輸出錯誤和警告信息,用法和常見的console.log方法一樣,不同點在于輸出時候的表現形式。一個是黃色的警告形式一個是紅色的錯誤形式。而console.error()方法會標記為錯誤的地方。
Paste_Image.png
console.table()
console.table()方法可以將傳入的對象或數組這些復合數據以表格形式輸出。
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()方法計算一個操作的執行的時間console.time()是開始,console.timeEnd()是結束。可以傳一個參數,參數為計時器的名稱。
console.time('計時器1');for(vari =0; i <100; i++) {for(varj =0; j <100; j++) {}? }console.timeEnd('計時器1');console.time('計時器2');for(vari =0; i <1000; i++) {for(varj =0; j <1000; j++) {}? }console.timeEnd('計時器2');
Paste_Image.png
console.group(),console.groupCollapsed(),console.groupend()
console.group()和console.groupCollapsed()這兩個方法用于將顯示的信息分組,可以把信息進行折疊和展開。他們都可以傳遞一個參數,參數默認是分組名。
用法都是一樣的。唯一區別就是console.group()是默認展開的,而console.groupCollapsed()默認是收起的。
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()方法就比較高大上點了,用來新建一個性能測試器,可以評估某段代碼的性能,可以傳一個參數,為生成的性能測試器的名字。
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()方法用來追蹤函數的調用過程。在復雜的架構中可以查找到對應的調用路徑。
functiond(a){console.trace();returna;}functionb(a){returnc(a);}functionc(a){returnd(a); }vara = b('123');
Paste_Image.png
PS:很多互聯網公司都會在頁面中寫類似的推廣呀,招聘呀。。。
Paste_Image.png
試著在你的網站寫寫類似的語句,說不定哪天,那個程序媛審查一下元素,就和你去拯救世界了呢。O(∩_∩)O~
varcons= console;if(cons) {cons.log('想和我共同保護世界,維護世界的和平嗎?\n');cons.log("請在郵件中注明:%c來自:浩3108的簡書","color:red;font-weight:bold;");}
暫時告一段。