网站首页 > 技术文章 正文
作为一个前端开发工程师,在开发阶段每天都会和console打交道,但大多数情况下都是简单实用console.log打印一些调试信息,可能console对象是让你最熟悉又陌生的,今天我们就来扒一扒console对象常用的方法,让你真正全方位的了解console都能做那些事情。
log、info、warn、error - 按级别打印
先来看看最常用的方法,这些方法可以将我们的信息进行分级,包括通用信息,资讯信息,警告信息和错误信息。
另外如果你在尝试的过程中,控制台并没有全部打印出来,可能是因为浏览器进行了一些信息级别过滤,这个时候需要你修改下配置,chrome中可以参考上图红框处进行选择。
group - 分组打印
如果你想将几条信息进行一些分组,你可能会需要group和groupEnd方法
另外如果你想默认折叠组的方式显示,只需要将group方法替换成groupCollapsed方法即可
table - 按表格方式打印
语法:console.table(data [, columns]);
- columns是非必填,表示要显示的列的名称,不填则全显示
- data是必填的,可以是对象或者是数组
如果是一维数组或对象中的属性对应的是基本数据类型的情况下,则会如下显示:
第一列是数组的角标或者是对象的属性名,第二列为数组的值或者对象的值。而输入是二维数组或者是对象中的属性还是对象或数组的情况下,则会如下显示:
第一列index列,跟上面的例子一样会显示数组的角标或者是对象的属性值,而后面的列则会因为解析到对应的值还是数组或者对象而继续解析,将值的角标或者是对象属性值当做表头平铺下来。
另外更复杂例子可以自行探索。
time、timeLog、timeEnd - 打印代码运行时间
这个没什么可说的,可以打印代码运行所花费的时间
trace - 打印堆栈跟踪
trace方法可以打印我们当前的执行调用栈,方便我们追踪和定位代码位置和问题。
替代字符串
在打印的方法中比如console.log中第一个参数,如果是一个字符串,则在字符串中可以存在多个“替代符”,替代符以%开头,他主要的功能是为了对字符串进行一些格式化的工作,具体我们来看下面这个例子:
从打印结果我们可以看到,log方法从第二个参数开始,替换掉了第一个字符串参数中的“替代符”,并进行了格式化,比如%d代表整数,所以传入的1.2被格式化成了1。
另外我们还可以使用%c这个替代符进行一些打印样式的修改,例子如下:
当然你还可以自行尝试一些更复杂更好看的样式组合。
结语
好了,今天我们聊了很多console对象的常用方法,这些都是console中比较好用的方法,希望可以让你了解到更多的console用法。
好了,我是全栈工程师鸡腿,一个战斗在互联网一线的全栈工程师,如果文章对你有所帮助,希望你可以点赞、转发、关注一下,如果你还想了解到哪些其他知识点,欢迎下方留言给我哈。
另外我们还有一个技术交流群,加入方式在我的首页置顶的微头条动态里有,欢迎大家加入。我们下次见~ 88~
猜你喜欢
- 2024-11-19 记某次常规js前端逆向
- 2024-11-19 前端代码安全与混淆
- 2024-11-19 前端抓包神器--whistle
- 2024-11-19 使用chrome调试工具解决问题(六)
- 2024-11-19 使用chrome调试工具解决问题(七)
- 2024-11-19 使用chrome调试工具解决问题(五)
- 2024-11-19 使用chrome调试工具解决问题(四)
- 2024-11-19 使用chrome调试工具解决问题(三)
- 2024-11-19 楼宇自控系统设备的安装与调试
- 2024-11-19 使用chrome调试工具解决问题(一)
你 发表评论:
欢迎- 最近发表
-
- 前端流行框架Vue3教程:13. 组件传递数据_Props
- 前端必看!10 个 Vue3 救命技巧,解决你 90% 的开发难题?
- JAVA和JavaScript到底是什么关系?是亲戚吗?
- Java和js有什么区别?(java和javascript的区别和联系)
- 东方标准|Web和Java的区别,如何选择这两个专业
- 前端面试题-JS 中如何实现大对象深度对比
- 360前端一面~面试题解析(360前端笔试)
- 加班秃头别慌!1 道 Vue 面试题,快速解锁大厂 offer 通关密码
- 焦虑深夜刷题!5 道高频 React 面试题,吃透 offer 稳了
- 2025Web前端面试题大全(整理版)面试题附答案详解,最全面详细
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)