七個鮮為人知的 JavaScript Console 方法
在使用 JavaScript 進(jìn)行調(diào)試時，console 對象的方法不僅僅只有 log、error 和 warn。你是否知道 console 其實(shí)有多達(dá) 20 種不同的方法？
圖片
它們不僅僅用于記錄文本，還可以實(shí)現(xiàn)豐富多彩的數(shù)據(jù)可視化、調(diào)試、性能測試等等。
以下是 7 個強(qiáng)大的 console 方法：
1. trace()
想知道代碼是從哪一步開始調(diào)用的嗎？使用 trace() 可以回溯調(diào)用棧，非常適合調(diào)試。
圖片
圖片
2. table()
console.table()：輕松地將對象數(shù)組顯示為表格，每行表示一個對象，每列表示一個屬性。
圖片
圖片
在 Node.js 中的效果稍有不同。
圖片
但無論如何，這都比 console.log() 更直觀。
圖片
3. count()
console.count() 記錄 count() 被調(diào)用的次數(shù)。
圖片
每次調(diào)用時，它的內(nèi)部計數(shù)器都會加 1 并記錄下來。
圖片
default() 是計數(shù)器的標(biāo)簽，它是 console.count() 方法的默認(rèn)標(biāo)簽。這個默認(rèn)標(biāo)簽會在你調(diào)用 console.count() 時自動生成，如果你沒有提供自定義標(biāo)簽，那么它就會使用 default 作為標(biāo)簽名稱。
你可以使用第一個參數(shù)自定義計數(shù)的標(biāo)簽
圖片
圖片
并使用 countReset() 方法將標(biāo)簽的內(nèi)部計數(shù)器重置為 0。
圖片
圖片
4. clear()
clear() 就像 JavaScript 版的 CLS，可以清除控制臺內(nèi)容。
圖片
圖片
圖片
5. time()、timeLog() 和 timeEnd()
這些方法可以精確測量任務(wù)執(zhí)行的時間。
- time() - 開始計時。
- timeLog() - 查看當(dāng)前已用時間。
- timeEnd() - 停止計時并記錄最終時間。
圖片
6. group()、groupCollapsed() 和 groupEnd()
這個組合非常適合將一組 console 消息分組顯示，帶有縮進(jìn)和 UI 展開/折疊功能。
- group() - 增加一個分組級別。
- groupCollapsed() - 類似于 group()，但分組默認(rèn)是折疊的。
- groupEnd() - 返回到上一個分組級別。
圖片
圖片
在 Node.js 中，只有縮進(jìn)效果，因此 groupCollapsed() 的效果不明顯。
圖片
7. dir()
dir() 是檢查對象并查看其所有屬性和方法的絕佳方式。
圖片
雖然表面上看與 console.log() 類似，但 console.dir() 是專門為這個目的設(shè)計的。
圖片
特別是在處理 HTML 元素對象時，log() 顯示的是 HTML 標(biāo)簽層次結(jié)構(gòu)，而 dir() 顯示的是對象的所有屬性。
圖片
總結(jié)
除了 console.log() 之外，console 對象還提供了許多其他強(qiáng)大的方法。有些方法可以讓控制臺 UI 更加豐富可視化，而其他方法則是強(qiáng)大的調(diào)試和性能測試工具。這些方法可以顯著提升你在調(diào)試 JavaScript 代碼時的效率和體驗(yàn)。
