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

  • 拼多多物流地图在哪开启(拼多多物流地图和物流信息不一致)

    拼多多物流地图在哪开启(拼多多物流地图和物流信息不一致)

  • 小米10青春版和10pro区别有哪些(小米10青春版和11青春版哪个好)

    小米10青春版和10pro区别有哪些(小米10青春版和11青春版哪个好)

  • iqoo5支持无线充电功能吗(iqoo5 无线充)

    iqoo5支持无线充电功能吗(iqoo5 无线充)

  • 网易云壁纸怎么自定义(网易云壁纸怎么恢复默认)

    网易云壁纸怎么自定义(网易云壁纸怎么恢复默认)

  • 苹果相册怎么打码(苹果手机相册怎么打)

    苹果相册怎么打码(苹果手机相册怎么打)

  • 快手商家号不认证可以吗(快手商家号不认证会限流吗)

    快手商家号不认证可以吗(快手商家号不认证会限流吗)

  • 闲鱼不确认收货要多久才能收到钱(闲鱼不确认收货申请退款不同意能收到钱吗)

    闲鱼不确认收货要多久才能收到钱(闲鱼不确认收货申请退款不同意能收到钱吗)

  • 苹果下载提示未完成付款(苹果下载提示未完成操作怎么回事)

    苹果下载提示未完成付款(苹果下载提示未完成操作怎么回事)

  • uv膜胶水进了按键怎么处理(贴uv膜进胶水)

    uv膜胶水进了按键怎么处理(贴uv膜进胶水)

  • 手机屏幕脱胶有危险吗(手机屏幕脱胶有什么原因)

    手机屏幕脱胶有危险吗(手机屏幕脱胶有什么原因)

  • 显示器和显卡有关系吗(显卡和显示器之间的关系)

    显示器和显卡有关系吗(显卡和显示器之间的关系)

  • a13相当于电脑什么CPU(a13相当于电脑什么显卡)

    a13相当于电脑什么CPU(a13相当于电脑什么显卡)

  • 酷狗会员最多几个人可以同时登录(酷狗会员最多几个人用)

    酷狗会员最多几个人可以同时登录(酷狗会员最多几个人用)

  • 荣耀play4tpro尺寸(荣耀play4tpro尺寸多少)

    荣耀play4tpro尺寸(荣耀play4tpro尺寸多少)

  • 为什么朋友圈的视频不能看(为什么朋友圈的评论会隐藏呢)

    为什么朋友圈的视频不能看(为什么朋友圈的评论会隐藏呢)

  • 闲鱼上超赞是干什么的(闲鱼的超赞在哪里点)

    闲鱼上超赞是干什么的(闲鱼的超赞在哪里点)

  • 苹果电脑自带的ppt叫啥(苹果电脑自带的软件可以删除吗)

    苹果电脑自带的ppt叫啥(苹果电脑自带的软件可以删除吗)

  • 华为m6可以配鼠标吗(华为m6支持蓝牙鼠标吗)

    华为m6可以配鼠标吗(华为m6支持蓝牙鼠标吗)

  • 小米防闪烁模式有什么用(小米防闪烁模式有必要打开吗)

    小米防闪烁模式有什么用(小米防闪烁模式有必要打开吗)

  • ie升级后如何还原(50枚爱心值是什么意思)

    ie升级后如何还原(50枚爱心值是什么意思)

  • 淘宝账户被保护怎解除(淘宝账户被保护怎么解除)

    淘宝账户被保护怎解除(淘宝账户被保护怎么解除)

  • vue能否添加滚动字幕(vue实现滚动条)

    vue能否添加滚动字幕(vue实现滚动条)

  • 梦想e卡免流范围(梦想e卡免流范围升级)

    梦想e卡免流范围(梦想e卡免流范围升级)

  • 拼多多怎么退单(拼多多怎么退款不想买了)

    拼多多怎么退单(拼多多怎么退款不想买了)

  • 苹果手机用快充伤电池吗(苹果手机用快充后再用普通充电器充电慢)

    苹果手机用快充伤电池吗(苹果手机用快充后再用普通充电器充电慢)

  • 荣耀畅玩9x是屏幕指纹吗(华为荣耀畅玩9x参数)

    荣耀畅玩9x是屏幕指纹吗(华为荣耀畅玩9x参数)

  • 加利西亚省科斯塔达莫尔特的灯塔,西班牙 (© Carlos Fernandez/Getty Images)(加里西亚省)

    加利西亚省科斯塔达莫尔特的灯塔,西班牙 (© Carlos Fernandez/Getty Images)(加里西亚省)

  • 机器学习论文源代码浅读:Autoformer

    机器学习论文源代码浅读:Autoformer

  • 两阶段鲁棒优化的 Benders分解 与 行列生成(C&CG) 算法及算例讲解(两阶段鲁棒优化 多目标)

    两阶段鲁棒优化的 Benders分解 与 行列生成(C&CG) 算法及算例讲解(两阶段鲁棒优化 多目标)

  • 原材料报废可以退税吗
  • 国际税收协定的名词解释
  • 从价从量复合计征
  • 什么需要填
  • 季度报表的利润表是填本月数填六月的书吗
  • 事业单位补提折旧怎么处理
  • 合并后少数股东权益的处理
  • 员工的油费补贴怎么算
  • 汽车贷款利息是什么
  • 公司出差开自己的车怎么计算损耗
  • 实收资本转出计入什么科目
  • 税目与应纳税额的关系
  • 农产品增值税免税
  • 原材料明细账目
  • 工程劳务公司的生产销售情况分析
  • 代理费是指
  • 出口退税免退税办法
  • 代持的股份
  • 收到财政补贴收入贷记科目是
  • 支付工程款会计处理
  • 公司收到银行存款利息收入会计分录
  • 在建工程人工费会计分录
  • 报销怎么打
  • linux使用docker
  • 印花税纳税申报表填写范本
  • php常用设计模式(大总结)
  • 商品削价要本着既能使企业什么又能使商品扩销的原则
  • 土地出资是否涉及企业所得税
  • 产品成本核算应正确划分哪些方面的费用界限
  • 更改税种需要哪些资料
  • 税务系统申报表
  • php自定义函数的关键字是什么
  • 长期股权投资后续计量收到红利账务处理
  • php上传照片
  • ctrl ate del
  • 个税申报结果查询
  • 收取的标书收入如何入账
  • 为什么开发票能抵税
  • 旅行社代订机票的发票可以抵税吗
  • 公司租赁员工的房屋
  • js 自定义类型
  • 公司福利费用会计分录
  • 会计上视同销售的八种情况是哪些?
  • 银行存款和其他应付款不平怎么处理
  • 每月工资不一样怎么算误工费呢
  • 预缴土地增值税税率表2023年最新
  • 房贷利息抵个税怎么申请
  • 个人如何缴纳公积金和社保费用
  • 无形资产如何摊销公式
  • 不交社保如何在网上投诉
  • 企业外购的无形资产的成本包括
  • 银行日记账更正
  • 租赁的初始直接费用有哪些
  • 服装、眼镜、鞋、西药的发票如何做账较好?
  • 理财产品利息计入本金吗
  • 存货总账根据什么填列
  • sql数据库对象
  • mysql重置binlog
  • Linux虚拟机下mysql 5.7安装配置方法图文教程
  • 完美解决英语怎么说
  • window系统中用什么命令来跟踪路由
  • linux i3桌面
  • launcher.exe是什么程序
  • 电脑主板驱动
  • win10registry
  • win7电脑老是自动重启是什么原因
  • Win10系统中怎么将文件夹进行压缩
  • 怎么关闭win10系统
  • gta4支持win10
  • 阴影映射可视域分析
  • android开发mvc mvp mvvm
  • jquery轮播代码
  • angular nz
  • js表单验证实例怎么写
  • Node.js中的事件循环是什么
  • linux同名文件
  • 国家税务局河南省税务总局官网
  • 税务开票系统对账流程
  • 温州地方税务局
  • 税务网上抄报流程是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设