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

  • 单位收到已交个税的劳务发票还需要申报个税吗
  • 劳务派遣公司如果倒闭了怎么办
  • 法人存入现金的会计分录
  • 申请补贴费用怎么写
  • 对供应商的罚款怎么入账
  • 社保扣款不成功会短信提醒吗
  • 收到货款确认收入但是后期开票了怎么做分录
  • 外经证预缴税款怎么计算
  • 用白纸写的收据怎么入帐?
  • 债券分期还本利息怎么算
  • 施工单位给你钱敢领吗
  • 合伙企业出资额不计入实收资本和资本公积 那放哪
  • 中药饮片适用增值税税率
  • 垃圾填埋沼气发电招聘
  • 对账单回复函
  • 发放股票股利后的未分配利润怎么算
  • 什么是劳动保护费支出
  • 营业执照办下来多久能在网上查到
  • 报表中在产品填什么数据
  • 成本/利润
  • 硝铵磷肥的肥效期
  • 如何免费获取Win11企业版
  • 发票跨年作废很麻烦吗
  • 会计中在建工程与建筑安装工程的区别
  • php中的预定义变量
  • rsmsink.exe - rsmsink是什么进程 有何作用
  • linux的安装和使用
  • macbookpro常见问题
  • 如何判定增值税发票真伪
  • php技巧
  • 房产自用改出租房产税如何申报
  • 浅谈中国式现代化3000字论文
  • 农业经营许可证范围
  • web前端修炼之道
  • un删除
  • 公司的注册资本是什么意思
  • 文化事业建设费的征收范围
  • 发票税金计入什么会计科目
  • 季度报是什么时候报
  • 红字专用发票能作废吗
  • 总公司签合同开票分公司做业务分公司如何确认收入?
  • 小额收据入账规则最新
  • 企业常用会计科目表及其解释
  • 饭店开业多久可以正常
  • 为什么说运输是实现物流合理化的关键
  • 跨年度发票能否税前扣除
  • 公司购买的空调
  • 房租收入怎么确认收入
  • 哪些项目的进项可以抵扣
  • 支付行业培训流程
  • 签合同前的协议叫什么
  • 多计提的税款会计处理
  • 收到银行承兑汇票计入什么科目
  • 企业流动负债比率多少算正常
  • 加工企业三种商业模式
  • centos下安装jdk
  • centos failed to start login service
  • centos bz
  • 电脑久了就会高温
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • Ubuntu After Install 2.6 帮助你安装 Ubuntu 常用软件
  • Retina MacBook和10.10.3支持更快的NVMe SSD接口
  • gwsloader.exe是什么意思
  • win7系统怎么设置桌面便签
  • 如何关闭win8的windows defender
  • win7系统桌面图标设置
  • opengl纹理贴图步骤
  • 搭建android开发环境需要用到哪些工具
  • android recyclerview 拖拽加阴影
  • python爆破脚本
  • android toast位置
  • 整型python
  • Python爬取网易云音乐歌单内歌曲歌手封面播放地址
  • js调用url接口
  • javascript原型链详解
  • android打包v1v2
  • bootstrap轮播效果
  • 国家 税务 总局
  • 企业调查表资金怎么填
  • 北京税务热线电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设