Console 對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。
Console對象可以在任何全局對象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。
它被瀏覽器定義為 Window.Console,也可被簡單的 Console 調用。
最常用的方法就是Console.log(),就是在控制臺輸出內容。剛開始學前端的時候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法,難道Console真的沒有別的用法了?查了一下后發現Console還是非常強大的,至于為什么很少看到有人用可能是因為用過都刪掉了吧。在此記錄一下Console的其他用法。
注意:因為Console 對象提供對瀏覽器控制臺的接入 所以在不同瀏覽器中的支持及表現形式可能不太一樣,但是調試內容只有我們開發者會看,所以保證開發環境能用這些方法就可以了,下面演示全部都為Chrome上面的效果。
分類輸出
不同類別信息的輸出
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('錯誤信息');
分組輸出
使用Console.group()和Console.groupEnd()包裹分組內容。
還可以使用Console.groupCollapsed()來代替Console.group()生成折疊的分組。
console.group('第一個組'); console.log("1-1"); console.log("1-2"); console.log("1-3"); console.groupEnd(); console.group('第二個組'); console.log("2-1"); console.log("2-2"); console.log("2-3"); console.groupEnd();

Console.group()還可以嵌套使用

表格輸出
使用console.table()可以將傳入的對象,或數組以表格形式輸出。適合排列整齊的元素

查看對象
使用Console.dir()顯示一個對象的所有屬性和方法
在Chrome中Console.dir()和Console.log()效果相同

查看節點
使用Console.dirxml()顯示一個對象的所有屬性和方法
在Chrome中Console.dirxml()和Console.log()效果相同
百度首頁logo的節點信息
條件輸出
利用console.assert(),可以進行條件輸出。
- 當第一個參數或返回值為真時,不輸出內容
- 當第一個參數或返回值為假時,輸出后面的內容并拋出異常

計次輸出
使用Console.count()輸出內容和被調用的次數

追蹤調用堆棧
使用Console.trace()來追蹤函數被調用的過程,在復雜項目時調用過程非常多,用這個命令來幫你縷清。

計時功能
使用Console.time()和Console.timeEnd()包裹需要計時的代碼片段,輸出運行這段代碼的事件。
- Console.time()中的參數作為計時器的標識,具有唯一性。
- Console.timeEnd()中的參數來結束此標識的計時器,并以毫秒為單位返回運行時間。
- 最多同時運行10000個計時器。

性能分析
使用Console.profile()和Console.profile()進行性能分析,查看代碼各部分運行消耗的時間,但是我在Chrome自帶的調試工具中并沒有找到在哪里查看這兩個方法生成的分析報告。應該需要其他的調試工具。
有趣的Console.log()
最后再來介紹一下強大的Console.log(),這個方法有很多的用法(其他輸出方法的用法,如error()等,可以參照log()使用)。
一、提示輸出
可以再輸出的對象、變量前加上提示信息,增加辨識度

二、格式化輸出

三、自定義樣式
使用%c為打印內容定義樣式,再輸出信息前加上%c,后面寫上標準的css樣式,就可以為輸出的信息添加樣式了
總結
Console的用法很多,有些再調試過程中非常實用,可以節省很多時間。當然我知道debug還是用斷點調試的方法比較好,但是小問題用“printf大法”也是很好用的。
(function () { for(var i = 0; i < 3; i++){ console.count("運行次數:"); } })() 追蹤調用堆棧 使用Console.trace()來追蹤函數被調用的過程,在復雜項目時調用過程非常多,用這個命令來幫你縷清。