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

  • 华为手机应用安装检测怎么关闭(华为手机应用安装到nm卡)

    华为手机应用安装检测怎么关闭(华为手机应用安装到nm卡)

  • beatsfitpro可以连电脑吗(beatsfitpro可以连苹果5S吗)

    beatsfitpro可以连电脑吗(beatsfitpro可以连苹果5S吗)

  • 抖音怎么查找附近直播(抖音怎么查找附近美食团购)

    抖音怎么查找附近直播(抖音怎么查找附近美食团购)

  • ps4光盘退出键在哪(ps4主机怎么退出光盘)

    ps4光盘退出键在哪(ps4主机怎么退出光盘)

  • 佳能相机怎么调成jpg模式(佳能相机怎么调出九宫格)

    佳能相机怎么调成jpg模式(佳能相机怎么调出九宫格)

  • 华为畅连通话怎么设置(华为畅连通话怎么设置铃声)

    华为畅连通话怎么设置(华为畅连通话怎么设置铃声)

  • 企业微信添加好友失败(企业微信添加好友对方收不到)

    企业微信添加好友失败(企业微信添加好友对方收不到)

  • 腾讯课堂分屏算时间吗(腾讯课堂分屏算分屏吗)

    腾讯课堂分屏算时间吗(腾讯课堂分屏算分屏吗)

  • 惠普打印机信息页没有二维码(惠普打印机信息表打不出来)

    惠普打印机信息页没有二维码(惠普打印机信息表打不出来)

  • 抖音账号永久封禁怎么解开(抖音账号永久封禁多久能恢复正常)

    抖音账号永久封禁怎么解开(抖音账号永久封禁多久能恢复正常)

  • 爱奇艺可以登录几个设备(爱奇艺可以登录几个账号)

    爱奇艺可以登录几个设备(爱奇艺可以登录几个账号)

  • win7屏幕旋转了90度怎么办(win7 屏幕旋转)

    win7屏幕旋转了90度怎么办(win7 屏幕旋转)

  • ipad保修要发票吗(苹果平板保修要发票吗)

    ipad保修要发票吗(苹果平板保修要发票吗)

  • mn5t2ll a是什么版本(mn5x2ll/a是什么版本)

    mn5t2ll a是什么版本(mn5x2ll/a是什么版本)

  • word2019邮件合并的步骤(word2019邮件合并照片显示不出来)

    word2019邮件合并的步骤(word2019邮件合并照片显示不出来)

  • 数字化和信息化的区别(数字化和信息化就是一回事)

    数字化和信息化的区别(数字化和信息化就是一回事)

  • 退id后备忘录没了可以修回吗(iphone退了id备忘录全不见了怎么办)

    退id后备忘录没了可以修回吗(iphone退了id备忘录全不见了怎么办)

  • 小米运动如何上传数据(小米运动设置具体步骤)

    小米运动如何上传数据(小米运动设置具体步骤)

  • 蚂蚁森林浇水上限(蚂蚁森林浇水上限修改)

    蚂蚁森林浇水上限(蚂蚁森林浇水上限修改)

  • 苹果怎么拒接陌生电话(苹果怎么拒接陌生来电和短信)

    苹果怎么拒接陌生电话(苹果怎么拒接陌生来电和短信)

  • 电脑网速测试是什么,在哪里能够打开?(电脑自带网速测试)

    电脑网速测试是什么,在哪里能够打开?(电脑自带网速测试)

  • 微信小程序 - 完美解决 web-view 公众号文章或第三方网站分享转发后,打开提示 “无法打开该页面,不支持打开” 或 “页面不存在”(IOS 苹果系统打开是空白页,安卓系统会有提示)超详细排查(微信小程序完美修真攻略)

    微信小程序 - 完美解决 web-view 公众号文章或第三方网站分享转发后,打开提示 “无法打开该页面,不支持打开” 或 “页面不存在”(IOS 苹果系统打开是空白页,安卓系统会有提示)超详细排查(微信小程序完美修真攻略)

  • 应交税费是什么科目借贷方向
  • 收到劳务发票还未付款
  • 借款合同印花税减免优惠政策2023
  • 流转税解释
  • 收到银行承兑汇票怎么接收
  • 无形资产多摊销了怎么办
  • 房地产购买材料财务报销单上怎么写
  • 企业股权资本的组成
  • 事业单位固定资产
  • 货币资金包括应收票据和应收账款吗
  • 员工借款从工资扣除如何个税
  • 融资租赁分摊差额扣除会计处理?
  • 建筑行业预算
  • 个税系统中允许捐赠比例是多少?
  • 当前一般纳税人增值税税率
  • 公司成立后一直没有收入
  • 发票金额大于付款金额怎么入账
  • 项目顾问是什么意思
  • 农产品增值税核定扣除办法
  • 投标财务状况报告怎么提供
  • 0元收购股份
  • 处置固定资产损失的账务处理
  • 赠与房产再出售税费
  • 设备安装公司如何经营
  • 在windows7环境中鼠标主要的三种操作方式是
  • PHP+Mysql+jQuery实现发布微博程序 php篇
  • 外贸公司付款方式有几种
  • mac底部菜单栏不见了快捷键
  • 输入字母和数字 小学信息技术课
  • php psr2
  • 用友预收货款账务处理
  • 成本法转为权益法例题
  • php常见字符串函数
  • php数组函数题目
  • 提坏账准备的会计分录 2022
  • php pdo类
  • js返回上一步操作
  • 前端开发从入门到放弃
  • Vite4 + Vue3 + vue-router4 动态路由
  • 接受专利投资会计科目
  • 企税申报表怎么填
  • 公司代个人缴纳社保,但不发工资和交税
  • 第四季度报表和年报对不上
  • mysql命令行怎么用
  • 注册资金认缴期限一般多少
  • 车辆抵押贷款怎么办理
  • 应收分保未到期责任准备金是什么科目
  • 公司前期装修费属于开办费吗
  • 少数股东权益如何保障
  • 其他债权投资期末公允价值的变动应当计入
  • 所得税需要转本吗
  • 退休人员在企业工作工资怎么算
  • 土地使用权属于无形资产吗
  • 国际货运公司支付境外运费
  • 投资有哪些方面
  • 利润率多少算好
  • 收到没有填税号的信息
  • 公司购药品入什么科目
  • 会计错账的更正方法
  • sql-3
  • 如何恢复数据库删除的文件
  • mysql数据库用户名和密码怎么查看
  • sql server索引的使用
  • 苹果macOS 14 正式发布
  • 如何用U盘安装新系统
  • win7网页无法访问
  • mac怎么设置开机默认windows
  • centos5.10安装
  • centos删除vg
  • centos7安装中文包
  • win8自动进入桌面
  • paytime.exe - paytime是什么进程 有什么用
  • windows8兼容性
  • cocos2dx schedule
  • shell命令怎么用
  • 汉诺塔游戏教程
  • javascript简明教程
  • jquery打开文件对话框
  • 税务稽查问题应对心得
  • 盐城国税电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设