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

  • 企业所得税汇算清缴
  • 行政法律法规是规定行政机关
  • 一个月没有账务往来,现金日记账如何登记?
  • 增值税零申报触发附加税零申报
  • 从事演出业务取得的收入
  • 申报抵扣了不做账怎么处理?
  • 其他业务收入的核算内容
  • 转账支票必须对着开发票单位吗?
  • 购买的车位应如果要进行税务处理需注意什么?
  • 所得税季报固定资产加速折旧表资产原值
  • 跨境税法
  • 三种类型的同期资料文档准备时间和提交税务机关时限有什么要求?
  • 银行没有流水怎么开证明
  • 股东以资产入股公司
  • 公司注销对外投资股权有效吗
  • 专利技术使用权转让属于特许权使用费
  • 公司法人如何从公司提钱
  • 局域网文件共享不稳定
  • 利润的计算公式excel
  • 个税手续费返还属于政府补助吗
  • 单位价值5000元二手设备怎么算
  • 随机赠送是啥意思
  • xp系统鼠标右键不能用怎么办
  • 合同资产的减值的计量
  • mac系统中文输入法切换
  • 出售固定资产减按2%会计处理1%怎么处理
  • vue实现导出
  • php file_append
  • 房企因商品质量问题退租
  • php返回函数值的关键字
  • php 面向对象
  • 农业产品征税范围注释财税字[1995]52号a
  • 运输费属于燃料费用吗
  • js怎么实现倒计时
  • nodejs如何与前端交互
  • php获取访问者信息
  • 其他应收款怎么核对
  • 在建工程转固定资产的账务处理
  • mongodb视频教程
  • php如何判断是移动还是pc
  • 开业前需要支出什么费用
  • 手写报销条子怎么写
  • 发票商品分类
  • 企业工会经费计提比例
  • 小微企业所得税税率多少
  • 公允模式投资性房地产转固定资产
  • 所得税费用是会计科目吗
  • 预计负债的账务处理
  • 一般纳税人的资格登记
  • 总公司和分公司如何分离
  • 以前年度收入少记了怎么做分录
  • 其他债权投资发生减值会影响所有者权益总额吗
  • 工程没钱也没有工资
  • 国税地税合并的时间
  • mysql怎么删除一定数量的记录
  • 将u盘制作成u启动u盘启动盘
  • 微软终止代码大全
  • 手工设置源泉设计
  • win7系统屏幕键盘怎么打开
  • windows8正版
  • 如何安装win95系统
  • aeadisrv.exe
  • 电脑dbs是什么
  • ubuntu怎么解压缩文件
  • Mac系统中文件的唯一id
  • win8跳过开机密码
  • win7怎么删除wifi已连接过的网络
  • cocos creator js ts
  • html中渐变
  • 游戏中的物理 processing
  • unity3D游戏开发
  • unityxlua热更新方案
  • javascript的promise
  • 解决问题
  • easyui表格
  • 基础的十进制按什么来算
  • 如何查询车辆购买的保险
  • 免税企业可以收增值税专票吗
  • 印花税应税凭证数量是什么意思
  • 邮政清关费用怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设