你真的會使用console嗎
1. console.table
表格形式打印
console.log
是我們最常用的打印方法,但是在打印一些比較複雜的數據時候,我們瀏覽起來就會顯得很費力。比如:
而使用console.table打印就會自動生成表格,使打印結果看起來更加清晰易懂:
2. console.dir
打印對象
console.dir
與console.log
不同之處在於,前者可以遞歸打印對象的所有屬性,而後者側重於字符串化的打印。比如要打印一個DOM節點。
console.log
只是把html節點打印出來,而console.table
把DOM對象的所有屬性打印出來。
console.log
附帶樣式打印
細心的朋友可能會發現許多網站會在Chrome控制檯打印許多提示信息,而且還附帶樣式,看起來非常的驚豔。比如天貓:
但是樣式具體要怎麼打印呢。
其實很簡單,只需要在打印的字符串前加上%c就可以添加樣式了。
還可以通過%s,%d等插入數據,和C語言printf相似。
console.trace
追蹤函數調用
console.trace()
方法用於顯示當前執行的代碼在堆棧中的調用路徑。通過在某個方法中打印一些信息,可以快速定位到該方法所在的文件和文件內具體位置,以及查看函數的調用棧。
console.assert
條件打印
assert方法接受兩個參數,第一個參數是表達式,第二個參數是字符串。只有當第一個參數爲false,纔會輸出第二個參數,否則不會有任何結果。比如:
例子中就只輸出了條件不成立,而且用紅色警示展示。
console.count
技術打印
相信在平時我們開發經常會去測試一些代碼執行的次數,一般我們都會聲明一個變量記錄次數,最後console.log
打印結果,其實瀏覽器內置給我們提供了這種方法。
console.time
和console.timeEnd
計時打印
計時也是非常好用的一種打印方法,爲了性能優化,我們可能經常定位一些執行時間較長的代碼段,平時很多人會通過Date.now()
計算,但其實瀏覽器也爲我們提供好了這種方法,不僅方便好用而且時間也是格式化好的。