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();
以上這些方法,如果運用的合理,還是對我們平時的開發效率很有幫助的。