精读《精通 console.log》

1 引言

本周精读的文章是 Mastering JS console.log like a Pro,一起来更全面的认识 console 吧!

2 概述 & 精读

console 的功能主要在于控制台打印,它可以打印任何字符、对象、甚至 DOM 元素和系统信息,下面一一介绍。

console.log( ) | info( ) | debug( ) | warn( ) | error( )

直接打印字符,区别在于展示形态的不同:

新版 chrome 控制台可以将打印信息分类:

log()info() 都对应 infowarn() 对应 warningserror() 对应 errors,而 debug() 对应 verbose,因此建议在合适的场景使用合适的打印习惯,这样排查问题时也可以有针对性的筛选。

比如调试信息可以用 console.debug 仅在调试环境下输出,调试者即便开启了调试参数也不会影响正常 info 的查看,因为调试信息都输出在 verbose 中。

使用占位符

  • %o — 对象
  • %s — 字符串
  • %d — 数字

如下所示,可通过占位符在一行中插入不同类型的值:

添加 CSS 样式

  • %c - 样式

可以总结出,console 支持输出复杂的内容,其输出能力堪比 HTML,但输入能力太弱,仅为字符串,因此采用了占位符 + 多入参修饰的设计模式解决这个问题。

console.dir( )

按 JSON 模式输出。笔者在这里也补充一句:console.log() 会自动判断类型,如果内容是 DOM 属性,则输出 DOM 树,但 console.dir 会强制以 JSON 模式输出,用在 DOM 对象时可强制转换为 JSON 输出。

输出 HTML 元素

按照 HTML ELements 结构输出:

这种输出结构和 Elements 打印形式是一致的,如果要看详细属性,可以使用 console.dir()

console.table

在控制台打印一个表格,属于功能增强。虽然仅文本也可以在控制台打印出漂亮的表格,但浏览器调试控制台的功能更强大,console.table 只是其富文本能力的一个体现。

console.group( ) & console.groupEnd( )

接下来是另一个富文本能力,按分组输出:

这种带有副作用的 API 显然是为方便阅读而设计的,然而在需要输出大量动态结构化数据的场景下,还需要进行结构转换,是比较麻烦的地方。

console.count( )

count() 用来打印调用次数,一般用在循环或递归函数中。接收一个 label 参数以定制输出,默认直接输出 1 2 3 数字。

console.assert( )

console 版断言工具,当且仅当第一个参数值为 false 时才打印第二个参数作为输出。

这种输出结果为 error,所以也可被 console.error + 代码级别断言所取代。

console.trace( )

打印此时的调用栈,在打印辅助调试信息时非常有用。

console.time( )

打印代码执行时间,性能优化和监控场景比较常见。

console.memory

打印内存使用情况。

console.clear( )

清空控制台输出。

3 总结

console 提供了如此多的输出规范,其实也是在变相制定开发规范,毕竟离开发者最近的就是调试控制台,如果你的项目打印规范与标准规范有差异,那么调试时信息看起来就会很别扭。

可以看到,大部分开源库都良好的遵循了这套规范,比如三方库绝不会输出 log(),而且将错误、警告与调试信息正确分开,并尽量少的用 CSS 样式、分组、table 等功能,因为这些功能干扰性较强,不能保证所有用户都可接受。

相对的,项目源码就比较适合使用一些醒目的自定义规范,只要这套规则能被很好的执行起来。

最后留下一个讨论点:console 可以作为调试、招聘信息、隐藏菜单的投放点,你还看到过哪些有意思的 console 使用方式呢?欢迎留言。

讨论地址是:精读《精通 console.log》 · Issue #228 · dt-fe/weekly

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/461458.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣-20. 有效的括号(回顾知识哈希表,栈)

给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右括号都有…

QT中dumpcpp以及dumpdoc使用

qt中调用COM的方式方法有四种,参考解释在 Qt 中使用 ActiveX 控件和 COM (runebook.dev) 介绍dumpcpp的使用方法Qt - dumpcpp 工具 (ActiveQt) (runebook.dev): 在安装好了的qt电脑上,通过powershell窗口来实现,powershell比cmd要…

C语言从入门到熟悉------第五阶段

结构体 结构体很重要,一定要掌握。但是在很多C语言书籍中结构体的内容讲得非常少,因为从结构体开始,后面介绍的内容已经超出C语言基础的范畴,属于C高级编程部分了。仅仅具备前面的知识是远远不够的,因为在实际编程中&…

#QT(定时轮播电子相册)

1.IDE:QTCreator 2.实验: (1)使用QOBJECT的TIMER (2)EVENT时间 (3)多定时器定时溢出判断 (4)QLABEL填充图片 3.记录 4.代码 widget.h #ifndef WIDGET_H…

AI - 决策树模型

🤔决策树算法 决策树的思想来源可以追溯到古希腊时期,当时的哲学家们就已经开始使用类似于决策树的图形来表示逻辑推理过程。然而,决策树作为一种科学的决策分析工具,其发展主要发生在20世纪。 在20世纪50年代,美国兰…

【消息队列开发】 测试MessageFileManager(对硬盘中的消息操作)类

文章目录 🍃前言🎄测试流程🌴准备工作🌲测试创建队列功能🌳测试统计文件的读写🎋测试将相应消息放入文件中🎍测试读文件里的消息到内存🍀测试删除消息😎测试垃圾回收⭕总…

AtomoVideo:AIGC赋能下的电商视频动效生成

✍🏻 本文作者:凌潼、依竹、桅桔、逾溪 1. 概述 当今电商领域,内容营销的形式正日趋多样化,视频内容以其生动鲜明的视觉体验和迅捷高效的信息传播能力,为商家创造了新的机遇。消费者对视频内容的偏好驱动了视频创意供给…

Yolo系列算法-理论部分-YOLOv3

0. 写在前面 YOLO系列博客,紧接上一篇Yolo系列算法-理论部分-YOLOv2-CSDN博客 1. YOLOv3-定型之作 2018年,Redmon团队推出YOLOv3的网络模型,将骨干网络(backbone)由darknet-19替换成darknet-53网络,加入特…

【Python循环2/5】for循环的复杂应用

目录 序言 导入1 累加 练习 导入2 计数器 练习 导入3 if判断 总结 序言 昨天,我们学习了 for 循环遍历列表、字典等数据的方式。今天我们会学习,for 循环与“累加” 、if 判断和“计数器”的结合运用。 导入1 在前面的学习中,我们学…

计算机网络——物理层(数据交换方式)

计算机网络——数据交换方式 提高数据交换方式的必要性电路交换电路交换原理电路交换的阶段建立阶段通信阶段和连接拆除阶段 电路交换的优缺点报文交换什么是报文报文交换的阶段报文交换的优缺点 分组交换分组交换的阶段分组交换的优缺点 数据交换方式的选择数据报方式数据报方…

VS Code上,QT基于cmake,qmake的构建方法(非常详细)

VS Code上,QT基于cmake,qmake的构建方法 1 前言2 QT基于cmake的构建方法2.1 VS Code关键插件安装2.2 系统环境变量配置2.3 VS Code中,环境变量配置2.4 Cmake新建一个新的Porject 3 QT基于qmake的构建方法 1 前言 最近,由于认证了github的学生…

尺寸小又薄的整流桥IBS

1. 整流桥功能介绍 整流桥在电子领域中扮演着至关重要的角色,为各种电子设备和电路提供了稳定的电源。整流桥的主要作用是将交流电信号转换为直流电信号。当交流电信号通过整流桥时,它会使得只有一个方向的电流能够通过,从而实现了将交流电信…

【数据结构练习题】栈——1.括号匹配 2.逆波兰表达式求值 3.出栈入栈次序匹配 4.最小栈

♥♥♥♥♥个人主页♥♥♥♥♥ ♥♥♥♥♥数据结构练习题总结专栏♥♥♥♥♥ 文件目录 前言1.括号匹配1.1问题描述1.2解题思路1.3画图解释1.4代码实现2.逆波兰表达式求值 2.1问题描述2.2解题思路2.3画图解释2.4代码解释3.出栈入栈次序匹配 3.1问题描述3.2思路分析3.3画图解释3.…

金融知识分享系列之:MACD指标精讲

金融知识分享系列之:MACD指标精讲 一、MACD指标二、指标原理三、MACD指标参考用法四、MACD计算步骤五、MACD分析要素六、根据快线DIF位置判断趋势七、金叉死叉作为多空信号八、快线位置交叉信号九、指标背离判断行情反转十、差离值的正负十一、差离值的变化十二、指…

KBP210-ASEMI新能源专用整流桥KBP210

编辑:ll KBP210-ASEMI新能源专用整流桥KBP210 型号:KBP210 品牌:ASEMI 封装:KBP-4 正向电流(Id):2A 反向耐压(VRRM):1000V 正向浪涌电流:6…

中整协与成都艺星联合主办的“面部馒化修复注射技术培训班”圆满落下帷幕

在追求医疗美容学科深度的道路上,Yestar成都艺星再次成为行业先锋,近日,由中整协与成都艺星整形美容医院联合主办的“面部馒化修复注射技术培训班”在Yestar成都艺星圆满落下帷幕。本次培训班以其严谨的学术精神和对临床治疗思路的深入解读&a…

在idea中配置tomcat服务器,部署一个项目(下载教程加链接)

第一步:把Tomcat下载好 ww​​​​​​​Apache Tomcat - Welcome! 链接如上:进去后在左边找到Tomcat8点击进去后 找到图下内容 第二步: 打开这个文件点击bin进去 会出现一个黑色框框,也就是服务器 完成后就可以在浏览器输入…

Redis 搭建主从集群

文章目录 1. 主从集群架构1.1 准备实例和配置1.2 启动1.3 开启主从关系1.4 测试 2. 主从同步原理2.1 全量同步2.2 增量同步repl_backlog原理 2.3 主从同步优化小结 单节点的 Redis 并发能力有限,要进一步提高 Redis 的并发能力,就需要搭建主从集群&#…

2024年无人直播是否已经成为新趋势,商家使用矩图AI无人直播月增长5万+

无论是 个体商户、企业经营者、电商从业者、想创业赚钱的朋友;也不管你是做餐饮还是非餐饮;亦或是抖音小时达外卖。这篇文章,请勿必看完,对你的业绩增长是有绝对的帮助。 无人直播的发展经历了几个时代,现在已经到了4.0的时代,更安…

刷题DAY24 | LeetCode 77-组合

1 回溯法理论基础 回溯法也可以叫做回溯搜索法,它是一种搜索的方式。回溯是递归的副产品,只要有递归就会有回溯。 所以以下讲解中,回溯函数也就是递归函数,指的都是一个函数。 1.1 回溯法的效率 回溯法的性能如何呢&#xff0…