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