JavaScript中的7個(gè)逆天console方法,你絕對(duì)想不到

在 JavaScript 中，console 不僅僅只有 log error 和 warn 方法。

實(shí)際上console有20多個(gè)這樣的方法。

它們的功能不僅僅是記錄文本，它還包括彩色數(shù)據(jù)可視化、調(diào)試、性能測(cè)試等等。

讓我們看看另外7個(gè)強(qiáng)大的方法

1. table()

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

在Node上有些不同：

明顯比使用console.log()效果更好

2. trace()

我們可以使用trace()來(lái)獲取我們的調(diào)用堆棧，對(duì)于調(diào)試非常管用。

3. count()

console.count()可以記錄當(dāng)前方法的調(diào)用次數(shù)?？聪旅孢@個(gè)示例

console.count()有一個(gè)從0開(kāi)始的內(nèi)部計(jì)數(shù)器。每次調(diào)用后，它將計(jì)數(shù)器加1并記錄它...

這里的default來(lái)自哪里呢，這是計(jì)數(shù)器的標(biāo)簽，在count方法里面有一個(gè)內(nèi)部字典，其中包含每個(gè)標(biāo)簽鍵的計(jì)數(shù)器值。

console.count()里面每個(gè)新標(biāo)簽從0開(kāi)始計(jì)數(shù)，每次調(diào)用后，它將計(jì)數(shù)器加1并記錄它...

我們可以使用count()的第一個(gè)參數(shù)輕松自定義標(biāo)簽

現(xiàn)在每條消息都有不同的計(jì)數(shù)。

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

4. clear()

console.clear() 方法會(huì)清空控制臺(tái)，但前提是該控制臺(tái)允許清空。在瀏覽器控制臺(tái)上支持清空，但 Node 終端支持度不夠，調(diào)用該方法將不會(huì)產(chǎn)生任何效果（也不會(huì)報(bào)錯(cuò)）。

5. time() + timeLog() + timeEnd()

這三個(gè)方法配合使用可以精確測(cè)量任務(wù)花費(fèi)的時(shí)間。

• time() - 啟動(dòng)計(jì)時(shí)器。
• timeLog() - 時(shí)間記錄
• timeEnd() - 停止計(jì)時(shí)器。

讓我們使用這三個(gè)方法來(lái)比較幾個(gè)常用循環(huán)所耗費(fèi)的時(shí)間

循環(huán)次數(shù)比較少時(shí) for 循環(huán)性能是最差的，當(dāng)循環(huán)次數(shù)變大時(shí)，性能優(yōu)于另外兩種循環(huán)。

6. group() + groupCollapsed() + groupEnd()

這是將一堆控制臺(tái)信息組合在一起的絕佳組合，通過(guò)縮進(jìn)優(yōu)化日志展示。

group() - 添加1個(gè)分組。groupCollapsed() - 類(lèi)似于group()，但分組開(kāi)始時(shí)處于折疊狀態(tài)。groupEnd() - 結(jié)束當(dāng)前分組

在Node上只支持縮進(jìn) — 所以groupCollapsed()在node里面沒(méi)有用。

7. dir()

dir()可以在控制臺(tái)中查看對(duì)象的所有屬性和方法。

看起來(lái)有點(diǎn)像console.log()，但console.dir()專(zhuān)為這個(gè)特殊目的而設(shè)計(jì)的。

我們?cè)倏聪率褂?code style="color:rgb(130,127,196);font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;">log()與dir() 打印HTML元素對(duì)象時(shí)會(huì)發(fā)生什么：

log()打印出HTML標(biāo)簽結(jié)構(gòu)，但dir()打印結(jié)果是對(duì)象上的每個(gè)屬性。

翻譯自：https://medium.com/coding-beauty/7-little-known-console-methods-in-javascript-6dfb63e665be

原作者：Coding Beauty

最后不要忘了點(diǎn)贊和在看呦！

祝 2024 年暴富！暴美！暴瘦！