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

圖片

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

以下是 7 個(gè)強(qiáng)大的 console 方法：

1. trace()

想知道代碼是從哪一步開始調(diào)用的嗎？使用 trace() 可以回溯調(diào)用棧，非常適合調(diào)試。

圖片

圖片

2. table()

console.table()：輕松地將對(duì)象數(shù)組顯示為表格，每行表示一個(gè)對(duì)象，每列表示一個(gè)屬性。

圖片

圖片

在 Node.js 中的效果稍有不同。

圖片

但無論如何，這都比 console.log() 更直觀。

圖片

3. count()

console.count() 記錄 count() 被調(diào)用的次數(shù)。

圖片

每次調(diào)用時(shí)，它的內(nèi)部計(jì)數(shù)器都會(huì)加 1 并記錄下來。

圖片

default() 是計(jì)數(shù)器的標(biāo)簽，它是 console.count() 方法的默認(rèn)標(biāo)簽。這個(gè)默認(rèn)標(biāo)簽會(huì)在你調(diào)用 console.count() 時(shí)自動(dòng)生成，如果你沒有提供自定義標(biāo)簽，那么它就會(huì)使用 default 作為標(biāo)簽名稱。

你可以使用第一個(gè)參數(shù)自定義計(jì)數(shù)的標(biāo)簽

圖片

圖片

并使用 countReset() 方法將標(biāo)簽的內(nèi)部計(jì)數(shù)器重置為 0。

圖片

圖片

4. clear()

clear() 就像 JavaScript 版的 CLS，可以清除控制臺(tái)內(nèi)容。

圖片

圖片

圖片

5. time()、timeLog() 和 timeEnd()

這些方法可以精確測(cè)量任務(wù)執(zhí)行的時(shí)間。

• time() - 開始計(jì)時(shí)。
• timeLog() - 查看當(dāng)前已用時(shí)間。
• timeEnd() - 停止計(jì)時(shí)并記錄最終時(shí)間。

圖片

6. group()、groupCollapsed() 和 groupEnd()

這個(gè)組合非常適合將一組 console 消息分組顯示，帶有縮進(jìn)和 UI 展開/折疊功能。

• group() - 增加一個(gè)分組級(jí)別。
• groupCollapsed() - 類似于 group()，但分組默認(rèn)是折疊的。
• groupEnd() - 返回到上一個(gè)分組級(jí)別。

圖片

圖片

在 Node.js 中，只有縮進(jìn)效果，因此 groupCollapsed() 的效果不明顯。

圖片

7. dir()

dir() 是檢查對(duì)象并查看其所有屬性和方法的絕佳方式。

圖片

雖然表面上看與 console.log() 類似，但 console.dir() 是專門為這個(gè)目的設(shè)計(jì)的。

圖片

特別是在處理 HTML 元素對(duì)象時(shí)，log() 顯示的是 HTML 標(biāo)簽層次結(jié)構(gòu)，而 dir() 顯示的是對(duì)象的所有屬性。

圖片

總結(jié)

除了 console.log() 之外，console 對(duì)象還提供了許多其他強(qiáng)大的方法。有些方法可以讓控制臺(tái) UI 更加豐富可視化，而其他方法則是強(qiáng)大的調(diào)試和性能測(cè)試工具。這些方法可以顯著提升你在調(diào)試 JavaScript 代碼時(shí)的效率和體驗(yàn)。