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

  • 快手视频没声音是怎么回事(快手视频没声音怎么办)

    快手视频没声音是怎么回事(快手视频没声音怎么办)

  • 小米手环4复制不了门禁卡(小米手环复制的门禁卡不能用)

    小米手环4复制不了门禁卡(小米手环复制的门禁卡不能用)

  • 苹果手机怎么定时关闭应用(苹果手机怎么定位)

    苹果手机怎么定时关闭应用(苹果手机怎么定位)

  • 美团先抢订单什么意思(美团的先抢单)

    美团先抢订单什么意思(美团的先抢单)

  • 怎么提前预约滴滴打车(滴滴预约车怎么提前预约)

    怎么提前预约滴滴打车(滴滴预约车怎么提前预约)

  • 抖音动态怎么删除(请问抖音动态怎么删除)

    抖音动态怎么删除(请问抖音动态怎么删除)

  • 什么播放器可以播放所有格式(什么播放器可以放大视频画面)

    什么播放器可以播放所有格式(什么播放器可以放大视频画面)

  • aics6是什么版本(aics6和ai2019)

    aics6是什么版本(aics6和ai2019)

  • word换行无法与上一行对齐(word无法切换行/列)

    word换行无法与上一行对齐(word无法切换行/列)

  • nova7充电时间(华为nove7se充电时间)

    nova7充电时间(华为nove7se充电时间)

  • 拼多多月卡自动续费吗(拼多多月卡自动续费在哪里关闭)

    拼多多月卡自动续费吗(拼多多月卡自动续费在哪里关闭)

  • iphone11用18w快充伤电池吗(iphone11十八瓦快充)

    iphone11用18w快充伤电池吗(iphone11十八瓦快充)

  • 快手为什么自动取消关注别人(快手为什么自动关注别人)

    快手为什么自动取消关注别人(快手为什么自动关注别人)

  • 蘑菇街直播必须有店铺吗(蘑菇街直播必须实名吗)

    蘑菇街直播必须有店铺吗(蘑菇街直播必须实名吗)

  • mx350显卡什么级别(mx350显卡什么级别能玩英雄联盟吗)

    mx350显卡什么级别(mx350显卡什么级别能玩英雄联盟吗)

  • tas一an00是华为什么型号(huaweitas-an00)

    tas一an00是华为什么型号(huaweitas-an00)

  • 怎么给手机设置密码(怎么给手机设置动态壁纸)

    怎么给手机设置密码(怎么给手机设置动态壁纸)

  • 华为手环4e蓝牙怎么配对(华为手环4e蓝牙打不开)

    华为手环4e蓝牙怎么配对(华为手环4e蓝牙打不开)

  • 学习强国怎么取消订阅

    学习强国怎么取消订阅

  • 麒麟810相当于骁龙多少(麒麟810相当于骁龙778g哪个好)

    麒麟810相当于骁龙多少(麒麟810相当于骁龙778g哪个好)

  • rx580发热严重垃圾

    rx580发热严重垃圾

  • 抖音海外版怎么下(抖音海外版怎么没网络)

    抖音海外版怎么下(抖音海外版怎么没网络)

  • 苹果蓝牙耳机为什么只有一个响(苹果蓝牙耳机为什么连接不上手机)

    苹果蓝牙耳机为什么只有一个响(苹果蓝牙耳机为什么连接不上手机)

  • 网上购电后需要插卡吗(网上购电后需要缴费吗)

    网上购电后需要插卡吗(网上购电后需要缴费吗)

  • 1660ti配什么cpu(1660ti配什么cpu2023)

    1660ti配什么cpu(1660ti配什么cpu2023)

  • 弥补亏损用税前还是税前
  • 应预缴税款如何计算?
  • 做账报税简单吗
  • 固定资产入账怎么做账
  • 公司租用个人房屋如何记账
  • 燃气费的账务处理
  • 实收资本账
  • 小规模残疾人交多少税收
  • 进项税抵扣
  • 可转换债券含义
  • 自行建造固定资产中的自营工程,在领用工程物资
  • 土地租金计入哪个会计科目
  • 土地增值税预缴政策
  • 主营业务收入包括哪些内容
  • 来料加工税务账应采取哪种核算方式?
  • 开错的红字发票申请单上传了怎么撤销?
  • 开出增值税发票没收到怎么抵扣进项税?
  • 开出密码区的普票能入账吗?
  • 未开票增值税怎么申报
  • 往来科目明细表
  • 收到的运输发票要交印花税吗?
  • 股权更改需要什么费用
  • 是否跨期
  • 工业企业和其他企业经营的对象
  • 退回社保费的会议记录
  • 企业支付微信认证怎么弄
  • 重装系统最好排名
  • win7电脑怎么开
  • 主营业务收入的计算公式
  • windows 搜索工具
  • 合作社实际没有自产自销,但税务方面怎么可以提供证明
  • 股东帮公司垫付货款
  • 完税凭证遗失后怎么处理
  • 外包员工的工资外包公司会扣吗
  • php imap函数
  • php数组拼接成字符串
  • anaconda卸载干净
  • spring三级缓存有什么用
  • php中global
  • input输入框限制最大字数
  • 小企业会计准则外币业务
  • python缺失值的解决方法
  • sql server 2008使用教程
  • 外币账户的设置在哪里
  • 固定资产核算应包括什么
  • 支付劳务费的账务处理
  • 坏账准备需要计提增值税吗
  • 购买其他权益工具投资时发生的交易费用
  • 原材料属于固定资本还是流动资本
  • 一般纳税人支出都要交税吗
  • 洗浴发票可以报销么
  • 先开票后发货是什么意思
  • 用友t6生成常用凭证
  • 基本户注销了还能查询流水吗
  • 销售毛利率怎么算
  • 建账前应该考虑哪些问题
  • 服务企业的举措
  • sql必会知识
  • mysql null+1
  • 完美解决MySQL通过localhost无法连接数据库的问题
  • bios密码忘记了要怎么重置
  • 微软停止对xp的操作
  • linux 用处
  • winxp系统设备管理器
  • linux日期格式
  • win7开机总是自检
  • owmngr.exe - owmngr是什么进程 作用是什么
  • win10系统附件在哪里
  • 简述js和jquery的关系
  • perl判断字符串相等
  • jquery源码分析
  • unity 动态生成模型
  • bootstrap按钮图标
  • python saga
  • android socket聊天
  • 广告费属于什么会计科目
  • 所得税 营业税计算公式
  • 设计合同需要备案吗
  • 粮食收储企业税收优惠
  • 电子税务网上申报平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设