在使用 JavaScript 進(jìn)行調(diào)試時，console 對象的方法不僅僅只有 log、error 和 warn。你是否知道 console 其實有多達(dá) 20 種不同的方法？

圖片

它們不僅僅用于記錄文本，還可以實現(xiàn)豐富多彩的數(shù)據(jù)可視化、調(diào)試、性能測試等等。

以下是 7 個強大的 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 對象還提供了許多其他強大的方法。有些方法可以讓控制臺 UI 更加豐富可視化，而其他方法則是強大的調(diào)試和性能測試工具。這些方法可以顯著提升你在調(diào)試 JavaScript 代碼時的效率和體驗。