位置: 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+源码)(新闻发布管理系统)

  • 个人所得税综合所得税率
  • 个人所得税如何办理退税
  • 税筹是什么意思,有哪些工具
  • 税收保全措施有金银首饰吗
  • 生产成本和销售费用是对应账户吗
  • 政府的慰问金一般有多少钱
  • 增值税进项税销项税
  • 汇算清缴结束后,税务机关发现企业应当取得
  • 一般纳税人进货收到普通发票
  • 税控设备维护费会计分录
  • 研发支出是什么性质的科目
  • 隔年的费用发票怎样入账
  • 折扣发票有什么作用
  • 天然气的销售需要什么资质
  • 汇总缴纳增值税如何申报
  • 年中入职个税怎么预扣
  • 企业的财产清查属于帐证核对?
  • 小规模纳税人增值税申报表怎么填
  • 公积金代扣时会扣多少
  • 华为手机麦克风在哪里
  • 怎样获取
  • 原材料盘亏计入
  • 补充医疗税前扣除还是税后扣除
  • 坏账准备的方法
  • 核定征收的小规模纳税人要做账吗
  • gcuservice.exe
  • 分手我不怕
  • 一只正在树上吃的苹果
  • slam方法
  • 印花税需要交钱吗
  • php ob缓存
  • laravel 5.4中实现无限级分类的方法示例
  • php判断数据库是否连接成功
  • php实现上传文件
  • web渗透违法吗
  • 房地产开发企业会计制度
  • 帝国cms怎么加自己的名字
  • 已申报未导入是什么情况
  • 支出在记账凭证里怎么填
  • 公司未实缴能破产吗
  • 公账转给员工工资
  • 浏览器加域名
  • web cms漏洞
  • 物业用房需要交维修基金吗
  • sqlceil函数用法
  • 在建工程领用自产应税消费品
  • 差额增值税发票和全额增值税发票
  • 库存,收入,支出,进货
  • 稳岗返还资金最新账务处理
  • 记账凭证核算形式
  • 资源税代扣代缴取消时间
  • 企业计提坏账准备形成可抵扣暂时性差异
  • 应付账款周转率计算公式
  • 代开专票作废了扣了两次税怎么办?
  • 小规模纳税人采用简易计税方法征收增值税
  • 非营利性组织和营利性组织的区别
  • 出纳提取现金有金额限制吗
  • 建筑业属于货物经营吗
  • 红冲发票需要收回原发票吗 税屋
  • 军工科研事业单位会计制度
  • 企业建账的法律规定
  • 工业企业应通过其他应付款科目核算的有
  • sqlserver字符串切割
  • xp系统许多网页打不开
  • pe工具箱怎么用
  • xpkw
  • Windows XP中网桥设置方法
  • centos7安装视频教程
  • excel表格用windows7打不开
  • 屏幕画面颠倒
  • WIN10怎么卸载更新
  • ai人工智能python
  • dota2 服务器ip地址
  • cdn ajax
  • vue.js打包部署
  • JavaScript Try...Catch 声明的 使用方法
  • 对python变量的理解
  • 北京西城税务局
  • 税务局社保服务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设