JS調試——console.log()以外console的其它用法

最常用的方法就是Console.log(),就是在控制檯輸出內容。剛開始學前端的時候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法,難道Console真的沒有別的用法了?查了一下後發現Console還是非常強大的,至於爲什麼很少看到有人用可能是因爲用過都刪掉了吧。在此記錄一下Console的其他用法。

注意:

因爲Console 對象提供對瀏覽器控制檯的接入 所以在不同瀏覽器中的支持及表現形式可能不太一樣,但是調試內容只有我們開發者會看,所以保證開發環境能用這些方法就可以了,下面演示全部都爲Chrome上面的效果。


1、分類輸出

不同類別信息的輸出




2、分組輸出

使用Console.group()和Console.groupEnd()包裹分組內容。
還可以使用Console.groupCollapsed()來代替Console.group()生成摺疊的分組。



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




3、表格輸出

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




4、查看對象

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




5、查看節點

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

百度首頁logo的節點信息



6、條件輸出

利用console.assert(),可以進行條件輸出。

1.當第一個參數或返回值爲真時,不輸出內容
2.當第一個參數或返回值爲假時,輸出後面的內容並拋出異常




7、計次輸出

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



8、追蹤調用堆棧

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




9、計時功能

使用Console.time()和Console.timeEnd()包裹需要計時的代碼片段,輸出運行這段代碼的事件。

1.Console.time()中的參數作爲計時器的標識,具有唯一性。
2.Console.timeEnd()中的參數來結束此標識的計時器,並以毫秒爲單位返回運行時間。
最多同時運行10000個計時器。



10、性能分析

使用Console.profile()和Console.profile()進行性能分析,查看代碼各部分運行消耗的時間,但是我在Chrome自帶的調試工具中並沒有找到在哪裏查看這兩個方法生成的分析報告。應該需要其他的調試工具。

具體參考這裏:

http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles


11、有趣的Console.log()

最後再來介紹一下強大的Console.log(),這個方法有很多的用法(其他輸出方法的用法,如error()等,可以參照log()使用)。

1) 提示輸出

可以再輸出的對象、變量前加上提示信息,增加辨識度



2) 格式化輸出


樣式:



3) 自定義樣式

使用%c爲打印內容定義樣式,再輸出信息前加上%c,後面寫上標準的css樣式,就可以爲輸出的信息添加樣式了




總結:

Console的用法很多,有些再調試過程中非常實用,可以節省很多時間。當然我知道debug還是用斷點調試的方法比較好,但是小問題用“printf大法”也是很好用的(滑稽臉)。

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