你真的會用console嗎—前端開發

你真的會使用console嗎

1. console.table表格形式打印

console.log是我們最常用的打印方法,但是在打印一些比較複雜的數據時候,我們瀏覽起來就會顯得很費力。比如:
在這裏插入圖片描述
而使用console.table打印就會自動生成表格,使打印結果看起來更加清晰易懂:
在這裏插入圖片描述

2. console.dir打印對象

console.dirconsole.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.timeconsole.timeEnd計時打印

計時也是非常好用的一種打印方法,爲了性能優化,我們可能經常定位一些執行時間較長的代碼段,平時很多人會通過Date.now()計算,但其實瀏覽器也爲我們提供好了這種方法,不僅方便好用而且時間也是格式化好的。
在這裏插入圖片描述

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