1. 程式人生 > >強大的Chrome瀏覽器的控制檯!!!

強大的Chrome瀏覽器的控制檯!!!

原來Chrome瀏覽器的控制檯比我想的還要強大。。。今天在瀏覽技術網站的時候發現一個自己不知道的黑科技。。。在這裡和大家分享。。。
console.log家族

console.clear ---console.clear();清空控制檯
1.console.log ('普通訊息')
2.console.info ('提示性資訊')
3.console.error ('錯誤資訊')
4.console.warn ('警示資訊')
如果再配合console.group 與console.groupEnd,可以將這種分類管理的思想發揮到極致。這適合於在開發一個規模很大模組很多很複雜的Web APP時,將各自的log資訊分組到以各自名稱空間為名稱的組裡面。


console.[color=teal !important]group("app.bundle"); 
console.[color=teal !important]warn("來自bundle模組的警告資訊1");console.[color=teal !important]warn("來自bundle模組的警告資訊2"); 
console.[color=teal !important]groupEnd(); 

console.[color=teal !important]group("app.bundle"); 
console.[color=teal !important]log("來自bundle模組的資訊1"
);console.[color=teal !important]log("來自bundle模組的資訊2");
 
console.[color=teal !important]groupEnd(); 

console.table 可以將將資訊可以把資訊以表格的形式打印出來,這樣就方便使用者檢查了     


console.assert
varisDebug=false; 
console.assert(isDebug,'開發中的log資訊。。。');

當你想程式碼滿足某些條件時才輸出資訊到控制檯,那麼你大可不必寫if或者三元表示式來達到目的,cosole.assert便是這樣場景下一種很好的工具,它會先對傳入的表示式進行斷言,只有表示式為假時才輸出相應資訊到控制檯。
   



console.count 
除了條件輸出的場景,還有常見的場景是計數。當你想統計某段程式碼執行了多少次時也大可不必自己去寫相關邏輯,內建的console.count可以很好地勝任這樣的任務。 

console.dir 
將DOM結點以JavaScript物件的形式輸出到控制檯,而console.log是直接將該DOM結點以DOM樹的結構進行輸出,與在元素審查時看到的結構是一致的。不同的展現形式。 


console.time & console.timeEnd 
輸出一些除錯資訊是控制檯最常用的功能,當然,它的功能遠不止於此。當做一些效能測試時,同樣可以在這裡很方便地進行。比如需要考量一段程式碼執行的耗時情況時,可以用console.time與 console.timeEnd來做此事。
console.[color=teal !important]time("Array耗時"); 
vararraynewArray(10000000); 
for(vari = array.length - 1;i >= 0;i--){ 
array[i] = newObject(); 
}; 
console.[color=teal !important]timeEnd("Array耗時"); 

copy
copy(document.body)

然後你就可以Ctrl+v了。注意:他不依附於任何全域性變數比如window,所以其實在JS程式碼裡是訪問不了這個copy方法的,所以從程式碼層面來呼叫複製功能也就無從談起。但願有天瀏覽器會提供相應的JS實現吧~這樣我們就可以通過js程式碼進行復制操作而不用再依賴Flash外掛了。 


keys & values 
這是一對基友。前者返回傳入物件所有屬性名組成的資料,後者返回所有屬性值組成的陣列。具體請看下面的例子:
vartfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'}; 
[color=teal !important]keys(tfboy); 
[color=teal !important]values(tfboy);