你不知道大概也不會去用但可以瞭解一下的Console隱藏騷操作!

console.log()差不多是我們平時開發過程中最常用的調試手法了,但其實關於Console還有很多其他方法可以幫助我們提高開發效率,雖然不常用,但可以作爲擴展知識,稍作了解。

關於控制檯

可以先全面瞭解一下 console 控制檯選項卡中的內容。

第一行:

清空 console 控制檯

top — 在默認狀態下,Console 的上下文(context)爲 top(頂級)。不過當你檢查元素或使用 Chrome 插件上下文時,它會發生變化。 你可以在此更改 console 執行的上下文(頁面的頂級 frame)。

過濾: 對控制檯的輸出進行過濾。你可以根據輸出嚴重級別、正則表達式對其進行過濾,也可以在此隱藏網絡連接產生的消息。

設置:

  • Hide network — 隱藏諸如 404 之類的網絡錯誤。
  • Preserve log — 控制檯將會在頁面刷新或者跳轉時不清空記錄。
  • Selected context only — 勾上後可以根據前面 top 選擇的上下文來指定控制檯的日誌記錄範圍。
  • group similar — 默認勾選。
  • Log XMLHttpRequests — 顧名思義,記錄 XMLHttpRequest 產生的信息。
  • Eager evaluation — 譯爲及早求值,用來節省內存和提高執行速度。
  • Autocomplete from history — Chrome 會記錄你曾經輸入過的命令,進行自動補全。

Console

平時我們用的最多的console.log大家應該已經非常熟悉,基礎用法就不贅述了。

補充一點可能不太瞭解的點,就是它的佔位符用法:

佔位符 作用
%s 字符串
%d or %i 整數
%f 浮點數
%o 可展開的DOM
%O 列出DOM的屬性
%c 根據提供的css樣式格式化字符串
console.log("%d年%d月%d日",2011,3,26);
2011年3月26日

console.log('%ctest',"color: red; font-size: 20px")

下面是一些我們幾乎沒有用過的方法列舉:

console.assert()

用來判斷一個表達式或變量是否爲真。如果結果爲否,則在控制檯輸出一條相應信息,並且拋出一個異常

該方法接受兩個參數,第一個參數是表達式,第二個參數是字符串。只有當第一個參數爲false,纔會輸出第二個參數,否則不會有任何結果

console.assert(true === false, "判斷條件不成立")
// Assertion failed: 判斷條件不成立
console.count()

用於計數,輸出它被調用了多少次。

(function() {
  for (var i = 0; i < 5; i++) { 
    console.count('count'); 
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
console.table()

將複合類型的數據轉爲表格顯示,同時也會顯示正常的打印結果

var arr= [ 
         { num: "1"},
         { num: "2"}, 
         { num: "3" }
    ];
console.table(arr);


上圖可以看出,輸出的表格是可以排序的。

console.time()

顯示代碼的運行時間,在進行性能優化時,可以有很好的參考作用。

console.time('計時器1');
for (var i = 0; i < 100; i++) {
  for (var j = 0; j < 100; j++) {}
}
console.timeEnd('計時器1');
console.trace()

console.trace 會將調用棧打印在控制檯中。如果你正在構建庫或框架時,它給出的信息將十分有用。
在這裏插入圖片描述

console.profile()

性能分析(Profiler)就是分析程序各個部分的運行時間,找出瓶頸所在

function All() {
  alert(1);
  for (var i = 0; i < 10; i++) {
    funcA(1000);
  }    
  funcB(10000);  
}
 
  
function funcA(count) {    
  for (var i = 0; i < count; i++) {}  
}
 
  
function funcB(count) {    
  for (var i = 0; i < count; i++) {}  
}
 
console.profile('性能分析器');
All();  
console.profileEnd();

在這裏插入圖片描述

以上這些方法,如果運用的合理,還是對我們平時的開發效率很有幫助的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章