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

  • 文化传媒公司的税种及税率
  • 小规模零申报增值税
  • 应交税费是没有增值税吗
  • 领用低值易耗品的记账凭证
  • 代收税款
  • 列支会议费要求
  • 返利回收期怎么计算
  • 其他非流动负债包括哪些科目
  • 增值税普通发票查询真伪
  • 车辆增值税抵扣多少点
  • 辅导期一般纳税人预缴增值税
  • 资产减值损失在贷方表示什么意思
  • 增值税降税让利给谁
  • 计算当期应纳税额
  • 设计服务交文化建设税吗
  • 去银行补充企业信息流程
  • 小微企业需要税务登记吗
  • 更正或作废申报怎么填
  • 升级鸿蒙系统后
  • 财务期初期末
  • 土地使用税如何终止申报
  • php最新动态
  • 个税手续费反还
  • 存货周转率公式怎么算
  • php设计模式及使用场景
  • 退货会计应该怎么做账
  • win10蓝牙搜索不到ps4手柄
  • win7资源管理器叫什么
  • 企业购进商品取得的现金折扣
  • 农村土地承包经营权证丢失怎么补办
  • 企业发给员工的食堂补贴需要交个税吗
  • 机关事业单位体检费用标准规定
  • 小规模纳税人报税期是哪几个月
  • fall 瀑布
  • php屏蔽错误
  • php统计中文长度
  • 玩转ChatGPT:中科院ChatGPT Academic项目部署与测评
  • 人脸检测5种方式
  • 简述资产负债表债务法
  • 事业结余是事业单位当年全部收支相抵后的余额
  • 员工体检费发票可以抵扣进项吗
  • 退票产生的费用如何报销
  • 小企业会计准则和企业会计准则的区别
  • sql2008设置
  • 印花税怎么交税率是多少
  • 企业年金是否要交个税
  • 将string类型数组转化成int
  • 车出险理赔需要什么材料
  • 餐饮管理公司如何收取管理费
  • 资产负债表应收账款期末余额公式
  • 固定资产的折余价值和账面价值如何确定
  • 高新技术企业亏损弥补的年限为十年
  • 购买固定资产进项税现金流量
  • 半成品是指正在各生产阶段加工的产品
  • 预提福利费
  • 小企业购进商品怎么入账
  • 红字发票信息表在哪里查询
  • 支付销售途中运费怎么算
  • 补贴算报酬吗
  • u盘启动怎么制作 u极速一键制作u盘启动图文教程
  • macbookpro 安装
  • macos 右键菜单
  • centos6.5桌面版安装教程
  • windows7找不到无线
  • 微软发布Win10优化工具
  • win7找回删除的文件
  • javascript entries
  • dos rd命令
  • java多线程产生死锁
  • shell脚本随机数
  • interview分析方法
  • python多线程菜鸟教程
  • go语言websocket
  • js的文件可以直接预览吗
  • 税务局副科长工资
  • 3.0排量 车船税
  • 贵州省微企补助政策
  • 一般纳税人开具的增值税普通发票和专用发票的区别
  • 营商环境法治保障服务
  • 广东省地税总局领导班子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设