文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

七个鲜为人知的 JavaScript Console 方法

2024-11-29 19:23

关注

图片

它们不仅仅用于记录文本,还可以实现丰富多彩的数据可视化、调试、性能测试等等。

以下是 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()

这些方法可以精确测量任务执行的时间。

图片

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

这个组合非常适合将一组 console 消息分组显示,带有缩进和 UI 展开/折叠功能。

图片

图片

在 Node.js 中,只有缩进效果,因此 groupCollapsed() 的效果不明显。

图片

7. dir()

dir() 是检查对象并查看其所有属性和方法的绝佳方式。

图片

虽然表面上看与 console.log() 类似,但 console.dir() 是专门为这个目的设计的。

图片

特别是在处理 HTML 元素对象时,log() 显示的是 HTML 标签层次结构,而 dir() 显示的是对象的所有属性。

图片

总结

除了 console.log() 之外,console 对象还提供了许多其他强大的方法。有些方法可以让控制台 UI 更加丰富可视化,而其他方法则是强大的调试和性能测试工具。这些方法可以显著提升你在调试 JavaScript 代码时的效率和体验。

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯