在 JavaScript 中,console 不仅仅只有 log
error
和 warn
方法。
![3ce7635c47a5e19e9208c5f91b91f51a.png](https://i-blog.csdnimg.cn/blog_migrate/d026ed6510fef92f69d425b17b3bb262.png)
实际上console有20多个这样的方法。
它们的功能不仅仅是记录文本,它还包括彩色数据可视化、调试、性能测试等等。
让我们看看另外7个强大的方法
1. table()
console.table()
: 可以很轻松的将对象数组显示为表格,每个对象一行,每个属性一列。
![ee716452045a725787b75d8f6c0b0cc7.png](https://i-blog.csdnimg.cn/blog_migrate/a14610fca49cfd7b8d2ed794381c4145.png)
![f66ea56c33965c7bc4d1656f9f3332ac.png](https://i-blog.csdnimg.cn/blog_migrate/ad55a9f1824c08d4870ea76f758caa0e.png)
在Node上有些不同:
![a36f15e9cc1463f01e195720f202153c.png](https://i-blog.csdnimg.cn/blog_migrate/43155d84d8201d24e7198e59db4755f1.png)
明显比使用console.log()
效果更好
![b78807e999c16508f202509494b73daf.png](https://i-blog.csdnimg.cn/blog_migrate/2c023abc655a6d4f61879c889bed60d3.png)
2. trace()
我们可以使用trace()
来获取我们的调用堆栈,对于调试非常管用。
![13c19394a4cb5da78c1919b4e33b8c0c.png](https://i-blog.csdnimg.cn/blog_migrate/1696ed4702a22600eb4b540ca22001eb.png)
![e6692873ed20bb1418e6810f43848bb4.png](https://i-blog.csdnimg.cn/blog_migrate/6e54b7bf7e24899351a17962194c9f32.png)
3. count()
console.count()
可以记录当前方法的调用次数。看下面这个示例
![ba9b3262ad76e7b4254c2cfd4cff0520.png](https://i-blog.csdnimg.cn/blog_migrate/1f1b5f6c144aa67cbb639a50d299ad33.png)
console.count()
有一个从0开始的内部计数器。每次调用后,它将计数器加1并记录它...
![8b3d0756775056214aab1b3f396bd8a1.png](https://i-blog.csdnimg.cn/blog_migrate/7e0272e9dac879259a203eef8674e8e9.png)
这里的default
来自哪里呢,这是计数器的标签,在count方法里面有一个内部字典,其中包含每个标签键的计数器值。
console.count()
里面每个新标签从0开始计数,每次调用后,它将计数器加1并记录它...
我们可以使用count()
的第一个参数轻松自定义标签
![0b59f32759e153902f8c2377f5743321.png](https://i-blog.csdnimg.cn/blog_migrate/0181ccee7ecccc3e2cd0e050eec34cdd.png)
![58348cd6e4939777f1ec654a22d8c7a6.png](https://i-blog.csdnimg.cn/blog_migrate/1feb9ac9da5b7a8a3ba564ca3f7b0a00.png)
现在每条消息都有不同的计数。
可以使用countReset()
方法将标签的内部计数器重置为0。
![ce9eb9072c4464e5b05e5fac89380347.png](https://i-blog.csdnimg.cn/blog_migrate/6aa9b3dbd2f160139a2c3614d625b9a5.png)
![7cf25ab0d8c58ce221b675e08f9ace74.png](https://i-blog.csdnimg.cn/blog_migrate/993d5a8e3b1a9ebcb895d698a73afad3.png)
4. clear()
console.clear() 方法会清空控制台,但前提是该控制台允许清空。在浏览器控制台上支持清空,但 Node 终端支持度不够,调用该方法将不会产生任何效果(也不会报错)。
![32639931c2084f0e6f3f3466d303a623.gif](https://i-blog.csdnimg.cn/blog_migrate/a9bdc65de9072eb8ee14a578d343e968.gif)
5. time() + timeLog() + timeEnd()
这三个方法配合使用可以精确测量任务花费的时间。
time()
- 启动计时器。timeLog()
- 时间记录timeEnd()
- 停止计时器。
让我们使用这三个方法来比较几个常用循环所耗费的时间
![6f18f16b5866741e10cfeec04fa2a0ce.png](https://i-blog.csdnimg.cn/blog_migrate/11d463376a8165d0b78528e44bd4a91e.png)
循环次数比较少时 for 循环性能是最差的,当循环次数变大时,性能优于另外两种循环。
![938689344adeb4e1369f2f1873dde224.png](https://i-blog.csdnimg.cn/blog_migrate/9080f756fe350d36023162099691fbe6.png)
6. group() + groupCollapsed() + groupEnd()
这是将一堆控制台信息组合在一起的绝佳组合,通过缩进优化日志展示。
group()
- 添加1个分组。groupCollapsed()
- 类似于group()
,但分组开始时处于折叠状态。groupEnd()
- 结束当前分组
![a095e02ec33a8710148fcdb92c575c2c.png](https://i-blog.csdnimg.cn/blog_migrate/a3afa069505bc939730c2ce9503512d5.png)
![6b48238f373f8f928410d2bc63ffe971.png](https://i-blog.csdnimg.cn/blog_migrate/754428d61544ff2459c9ba8856d06bc7.png)
在Node上只支持缩进 — 所以groupCollapsed()
在node里面没有用。
![ad29e2be86e9503e3b22e1472574ad5d.png](https://i-blog.csdnimg.cn/blog_migrate/11e82c930e4a7fd84c70216b83ba71e1.png)
7. dir()
dir()
可以在控制台中查看对象的所有属性和方法。
![4b29618448269f0d0e104717dbdff27b.png](https://i-blog.csdnimg.cn/blog_migrate/d277a20003cfecf4d9f5ad527d23c601.png)
看起来有点像console.log()
,但console.dir()
专为这个特殊目的而设计的。
![58c9752bf1bad9fbafff4302fc0aa7da.png](https://i-blog.csdnimg.cn/blog_migrate/4d6dd7f1091ff13258486563239ef539.png)
我们再看下使用log()
与dir()
打印HTML元素对象时会发生什么:
![920650e27cf54afef1e4e7dc9983e7d5.png](https://i-blog.csdnimg.cn/blog_migrate/f654b5edfa2a5732aa09c616904cd8e3.png)
log()
打印出HTML标签结构,但dir()
打印结果是对象上的每个属性。
翻译自:https://medium.com/coding-beauty/7-little-known-console-methods-in-javascript-6dfb63e665be
原作者:Coding Beauty
最后不要忘了点赞和在看呦!
祝 2024 年暴富!暴美!暴瘦!