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

  • 小型微利企业所得税减免政策
  • 小规模纳税人购买原材料会计分录
  • 装卸搬运的设备有哪些类型
  • 围挡制作开票的税收分类
  • 房地产公司土地价款抵扣的账务处理
  • 防伪税控业务
  • 收到物业费普通发票做账
  • 商业保理公司票据贴现账务处理
  • 供货方提供安装材料
  • 长期股权投资如何审计
  • 互联网企业资产负债表特征
  • 事业单位收个人部分社保怎么入账
  • 发票专用章管理办法
  • 什么是城镇土地使用税
  • 股权转让涉及的印花税
  • 按季申报是什么意思
  • 分红未及时扣缴税款要缴滞纳金吗?
  • 物业公司水费差额征税不备案
  • 上个月开的发票这个月还能用吗
  • 实物捐赠怎么避免多缴企业所得税?
  • 映泰主板系统重装
  • 在win7系统中如何让电脑恢复出厂设置方法
  • 合并报表同一控制下和非同一控制下区别
  • NPFMSG.exe - NPFMSG是什么进程 有什么用
  • 其他综合收益和其他收益的区别
  • 计提劳务派遣人员社保收到发票后没有付款的会计分录
  • PHP:pg_copy_from()的用法_PostgreSQL函数
  • 不动产进项税额转出计算公式
  • messenger 是什么意思
  • 收取跨年租金会计处理
  • 1.启动前端项目怎么做
  • 企业为员工缴纳社保标准及流程
  • 车辆购置税征收对象
  • 申报表已申报未交款后作废
  • 存货捐赠视同销售要不要确认收入?
  • thinkphp 模板标签
  • php如何post
  • md5 python3
  • phpcms视频教程
  • c语言中函数的数据类型是指
  • 冲红的发票怎么做账会计分录
  • 出售固定资产的损失计入什么科目
  • 存货按照计划成本法核算内容
  • mysql官方性能报告
  • 车辆抵押贷款怎么办理
  • 银行代付工资如何操作
  • 银行代扣水电
  • 公司员工出差住酒店费用明细有问题怎么办
  • 6月收到4月的单子怎么办
  • 提取坏账会计分录怎么写
  • 债务现金流量是正还是负
  • 如何做好企业安全生产工作
  • SQL Server ltrim(rtrim()) 去不掉空格的原因分析
  • 远程连接局域网电脑
  • 忘记windows登陆密码
  • windows service 2008 r2
  • windows无法启动怎么解决
  • win10预览版21277下载
  • apache服务器配置与使用工作笔记
  • Ubuntu系统怎么设置root
  • msstat.exe - msstat是什么进程 有什么用
  • windows7桌面背景怎么设置
  • win7右下角的网络连接不显示
  • win7系统电脑蓝牙怎么开
  • sae定义及如何上报
  • cocos creator2.4
  • pip工具安装
  • 命令行net
  • python数据结构教程
  • Unity3d中EventTrigger的封装
  • js中的隐式类型转换
  • Unity Enemy behaviour
  • 清除安卓系统垃圾
  • jquery技巧
  • 动态页面设计
  • 河南省国家税务局电子税务局
  • 江西税务局
  • 税务稽查立案标准金额
  • 中国进口0号柴油价格
  • 集体诉讼的后果
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设