JavaScript中的7个逆天console方法,你绝对想不到🤔

31 阅读2分钟

在JavaScript中,console不仅仅只有log error 和warn方法。

4b8aa4c78dbe5b76cf6afa2946e64907.jpg

实际上console有20多个这样的方法。

它们的功能不仅仅是记录文本,它还包括彩色数据可视化、调试、性能测试等。

让我们看看另外7个强大的方法

1. table()

console.table():可以很轻松的将对象数组显示为表格,每个对象一行,每个属性一列。

ebc12f97864a27d8064a5032e845a84b.jpg

8cab997d04611ee3e758e73a0eb45907.jpg

在Node上有些不同:

c15a578d295efdb7fc860c979dd4705b.jpg

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

977277a35c8fb16faaa5982ac2229a12.jpg

2. trace()

我们可以使用trace()来获取我们的调用堆栈,对于调试非常管用。

39fe81ea3776d8e83d2bc2e6e12ae369.jpg

6488f0b4379b184b91866d121b3429f6.jpg

3. count()

console.count()可以记录当前方法的调用次数。看下面这个示例

db950b33adb4974a2810bba2dc8032cd.jpg

console.count() 又一个从0开始的内部计数器。每次调用后,它将计数器加1并记录它...

95c7775733c1678bc1fa335d04d6c984.jpg

这里的default来自哪里呢,这是计数器的标签,在count方法里面有一个内部字典,其中包含每个标签键的计数器值。

console.log() 里面每个新标签从0开始计数,每次调用后,它将计数器加1并记录它...

我们可以使用count()的每一个参数轻松自定义标签

209d9c9fa5fbfb9eafc98f505e40c84c.jpg

bc7df7ac4ecb896172d6d4c60a4c7767.jpg

现在每条消息都有不同的计数。

可以使用countReset()方法将标签的内部计数器重置为0。

59a428cc6094d9e7cea7f35b2e0e8138.jpg

d860ab42b08f16c2b4d0a74c03ee146b.jpg

4. clear()

console.clear()方法会清空控制台,但前提是该控制台允许清空。在浏览器控制台上支持清空,但Node终端支持度不够,调用该方法将不会产生任何效果(也不会报错)。

WechatIMG379.jpeg

WechatIMG380.jpeg

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

这三个方法配合使用可以精确测量任务花费的时间。

  • time() - 启动计时器。
  • timeLog() - 时间记录。
  • timeEnd() - 停止计时器。

让我们使用这三个方法来比较几个常用循环所耗费的时间

6e77cbfd06ab9b342aebb7f1a4216227.jpg

循环次数比较少时for循环性能是最差的,当循环次数变大时,性能优于另外两种循环。

51d5eb1a4a0a63061980f9fe44df6460.jpg

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

这是将一堆控制台信息组合在一起的绝佳组合,通过缩进优化日志展示。

group() - 添加1个分组。groupCollapsed()- 类似于group(),但分组开始时处于折叠状态。groupEnd() - 结束当前分组

05111c2843765c6941ca731a6cd41764.jpg

73db95419c36d3c70b8daaa0e8dfe3b2.jpg

在Node上只支持缩进 —— 所以 groupCollapsed()在node里面没有用。

34134c420b12c8bccd0f8e49576439d0.jpg

7. dir()

dir()可以在控制台中查看对象的所有属性和方法。

1d85ff75c1dfe43531f4ba1f518b08bb.jpg

看起来有点像console.log(),但console.dir()专为这个特殊目的而设计的。

3e8218f2c5374523239a83ec2c64b4b9.jpg

我们再看下使用log()与dir()打印HTML元素对象时会发生什么:

a43d606bb1aaee4535beaa33bf9e7562.jpg

log()打印出HTML标签结构,但dir()打印结果是对象上的每个属性。

翻译自:medium.com/coding-beau…

原作者:Coding Beauty