位置: IT常识 - 正文

前端小知识:控制台打印(console)- 模拟Java日志打印、表格形式打印美化输出对象、代码运行时间统计(前端控制台)

编辑:rootadmin
前端小知识:控制台打印(console)- 模拟Java日志打印、表格形式打印美化输出对象、代码运行时间统计 文章目录6. 控制台打印(Console)模拟Java日志打印格式美化对象打印(表格形式打印输出)日志等级输出(让其在控制台显示时有颜色提示)代码运行时间统计打印输出

推荐整理分享前端小知识:控制台打印(console)- 模拟Java日志打印、表格形式打印美化输出对象、代码运行时间统计(前端控制台),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端控制台怎么调试,控制力强的前端,前端控制,前端控制台,前端控制原则是指,前端控制原则是指,前端控制理论,前端控制,内容如对您有帮助,希望把文章链接给更多的朋友!

6. 控制台打印(Console)前端小知识:控制台打印(console)- 模拟Java日志打印、表格形式打印美化输出对象、代码运行时间统计(前端控制台)

官方文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Console#用法

模拟Java日志打印格式替换字符作用%o对象(可看到内部结构)%s字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body><script> let people = { name: "lrc", year: 18 } let article = { id: "423432431sfsdf", content: "测试控制台接口" } //不建议:这样打印不出对象内部结构 console.log("people:" + people + " article: " + article) console.log("people:%s article: %s", people, article) //建议 == 下面两种是一样的 console.log("people:", people, "article: ", article) console.log("people:%o article:%o", people, article)</script></html>

美化对象打印(表格形式打印输出)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body><script> let people = { name: "lrc", year: 18 } let article = { id: "423432431sfsdf", content: "测试控制台接口" } console.table(people) console.table(article) let arrays = [people,article] console.table(arrays)</script></html>

日志等级输出(让其在控制台显示时有颜色提示)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body><script> console.error("错误日志哦!!!") console.warn("警告日志哦!!!") console.log("普通日志哦!!!")</script></html>

代码运行时间统计打印输出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body><script> console.time("代码时间统计"); let people = { name: "lrc", year: 18 } let article = { id: "423432431sfsdf", content: "测试控制台接口" } console.timeLog("代码时间统计"); //不建议:这样打印不出对象内部结构 console.log("people:" + people + " article: " + article) console.log("people:%s article: %s", people, article) //建议 == 下面两种是一样的 console.log("people:", people, "article: ", article) console.log("people:%o article:%o", people, article) console.timeLog("代码时间统计"); console.table(people) console.table(article) let arrays = [people,article] console.table(arrays) console.timeLog("代码时间统计"); console.error("错误日志哦!!!") console.warn("警告日志哦!!!") console.log("普通日志哦!!!") console.timeEnd("代码时间统计");</script></html>

本文链接地址:https://www.jiuchutong.com/zhishi/292412.html 转载请保留说明!

上一篇:【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式(vue添加css)

下一篇:新闻发布及管理系统的设计与实现(论文+PPT+源码)(新闻发布管理系统)

  • 银行手续费回单可以作为入账依据吗
  • 预缴增值税计算公式方法
  • 物业收电费有问题找谁解决
  • 税务不受地方管吗
  • 结转城建税和教育费附加
  • 房屋租赁后转租合法吗
  • 有限合伙企业注册资金要求
  • 预缴增值税附加税怎么算
  • 单位的收入是刷卡怎么做账
  • 事业单位财政授权书模板
  • 交通运输业安全心得体会范文
  • 房地产企业工程款支付流程
  • 维修费增值税怎么开
  • 跨境税法
  • 资产负债表和利润表的利润不一致
  • 门店关闭费用怎么处理
  • 业务招待费在税法上的规定
  • 产品售后产生材料费会计核算
  • 固定资产入账会计
  • 旅行社的综合服务费
  • 1697509439
  • 初始投资成本与可辨认净资产公允价值
  • 旧货销售的增值税税率
  • 调整会计分录是什么
  • 硬盘 安装系统
  • vue blob下载文件
  • vue页面获取url参数
  • 出售固定资产减按2%会计处理1%怎么处理
  • 存放同业款项和拆出资金在资产负债表中
  • 微信小程序插件有哪些
  • three.js入门指南
  • 最小的外置dvd刻机多少寸
  • 非城市公交企业管理办法
  • 公司收到个人汇款怎么办
  • php import
  • 顺流交易合并抵消
  • 要点初见:Stable Diffusion NovelAI模型优质文字Tag汇总与实践【魔咒汇总】
  • iframe之间通信
  • 金税盘报送汇总在哪
  • 租用办公室装修费用会计分录
  • 增值税小规模纳税人适用3%征收率
  • 小企业会计准则调整以前年度费用分录
  • 开票资料的开户银行必须是基本户吗
  • mysql新手教程
  • 以前年度损益调整结转到哪里
  • 企业的利润分配包括哪些
  • 长期应收款的主要类型
  • 挂靠指的是什么意思?
  • 以前年度损益调整结转到哪里
  • 安全生产费实际发生
  • 弥补以前年度亏损报表怎么填
  • 制造费用怎么写
  • 低值易耗品怎么摊
  • 如何发放银行贷款利息
  • 收到劳务公司代发工资怎么做账
  • 个体工商户是否要交税
  • 无形资产摊销怎么做记账凭证
  • 什么情况下投资乘数最大
  • 应付利润属于什么科目类别
  • windows开始菜单栏不见了
  • windowsserver2008r2密码重置
  • linux安装c环境
  • 进程死锁原因
  • 看视频出现弹幕怎么处理
  • window8更新10
  • win1020h2正式版
  • win10系统打开文件夹就不停的闪
  • OpenGL Tips: 在Visual C++中调用FreeGLUT
  • 逐一介绍班子成员表现
  • python怎么用
  • cocos 2d x
  • jsp手机号验证
  • jquery滑动效果
  • jquery可编辑表格插件
  • linux中shell脚本实验总结
  • ruby format
  • 银饰品交消费税吗
  • 电子发票是什么格式的文件
  • 银行理财收入如何记账
  • 长沙市各个区的县市排名
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设