控制台日志打印console的封装,加入美化与打印开关

控制台日志打印console的封装,加入美化与打印开关

为什么要写这个?

封装这个控制台日志打印工具,主要是在项目中自己做的SDK需要提供给其他开发人员使用,加入了日志美化和打印打开,方便了开发人员查找SDK中的日志(提高了逼格),也加深了自己对日志关键性的理解。
首先讲下封装时遇到的一些问题点:

  1. 日志开关
  2. 日志查找便捷性
  3. 日志打印位置需要保留
  4. web环境外使用(目前支持node环境)

对于以上问题点,我是这么解决的:

  • 我是用ts写的,我在工具实际调用的方法内进行清除与重置print来解决日志开关的问题;
  • 日志查找的便携性,我加入了特殊的日志颜色来区分,也就是美化了一下日志输出;
  • 日志打印位置保留,采用了如:console.info.bind(this, ...this.infoPadStartText)这样,即保留了日志位置,又可以像平常使用console一样进行逗号( ,)分隔传参;
  • 为了区分是否是node.js环境,进行了typeof process === 'object'判断。

希望这次分享给大家带来方便和灵感,谢谢。

介绍

这是“console”对象的进一步美化和封装,包括console.log、console.info、console.warn、console.error。
可以加入自定义的console打印前缀、对内容进行美化(web端规则参考 https://developer.mozilla.org/en-US/docs/Web/API/Console ,node环境参考 https://zh.wikipedia.org/wiki/ANSI%E8%BD%AC%E4%B9%89%E5%BA%8F%E5%88%97),可随时关闭console打印,支持node环境

github地址:
https://github.com/zancheng/beautify-console-log

gitee地址:
https://gitee.com/cheng-zan/beautify-console-log

效果如下

node日志美化
web端日志美化

安装教程

npm i beautify-console-log --save

yarn add beautify-console-log

使用说明

  1. 简单使用
const log = BeautifyConsole.getInstance();
// 使用方式与正常的console.info()一致
log.info(1234, '4', [3, 5]);
  1. 支持的console类型
const log = BeautifyConsole.getInstance();
log.info(1234, '4', [3, 5]);
log.log(1234, '4', [3, 5]);
log.warn(1234, '4', [3, 5]);
log.error(1234, '4', [3, 5]);
  1. 加入自定义console日志头
const log = BeautifyConsole.getInstance();
log.setPadStartText('log', 'hello world').info(1234, '4', [3, 5]);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/111992.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

目标检测前言,RCNN,Fast RCNN,Faster RCNN

一、RCNN: 找到概率最高的目标之后,与其他目标进行IOU交并比计算,若高于一定值,则说明这两张图片预测的是同一个目标,则把概率低的目标删掉 二、Fast RCNN 因为是直接得到特征图之后进行映射,所以不限制输入…

uniapp抽取组件绑定事件中箭头函数含花括号无法解析

版本: "dcloudio/uni-ui": "^1.4.27", "vue": "> 2.6.14 < 2.7"... 箭头函数后含有花括号的时候, getData就拿不到val参数 , 解决办法就是去除花括号 // 错误代码: <SearchComp change"(val) > { getData({ val …

【大数据】Doris 构建实时数仓落地方案详解(二):Doris 核心功能解读

Doris 构建实时数仓落地方案详解&#xff08;二&#xff09;&#xff1a;Doris 核心功能解读 1.Doris 发展历程2.Doris 三大模型3.Doris 数据导入4.Doris 多表关联5.Doris 核心设计6.Doris 查询优化7.Doris 应对实时数仓的痛点 1.Doris 发展历程 Apache Doris 是由 百度 研发并…

讨论问题--数据类型、数组、传值/址API函数等

前言 数据类型是编程语言中用于表示数据的分类。常见的数据类型包括整数、浮点数、字符串、布尔值等。数据类型决定了变量能存储的值的种类和范围。 数组是一种存储多个相同类型数据的数据结构。它通过索引来访问并操作其中的元素。数组在内存中是连续存储的&#xff0c;可以…

OpenCV之YOLOv2-tiny目标检测

&#x1f482; 个人主页:风间琉璃&#x1f91f; 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 目录 前言 一、YOLOv2-tiny介绍 二、预处理 三、模型加载与推理 四、解析输…

ros----发布者和订阅者模型

话题模型&#xff1a; 如何自定义话题消息 1.定义msg文件 2.在package.xml中添加功能包依赖 <build_depend>message_generation</build_depend> <exec_depend>message_runtime</exec_depend>3.在CMakeList.txt文件中添加编译选项 4.编译生成语言的相…

Android 系统中适配OAID获取

一、OAID概念 OAID&#xff08;Open Anonymous Identification&#xff09;是一种匿名身份识别标识符&#xff0c; 用于在移动设备上进行广告追踪和个性化广告投放。它是由中国移动通信集 团、中国电信集团和中国联通集团共同推出的一项行业标准 OAID值为一个64位的数字 二、…

Pytorch Advanced(二) Variational Auto-Encoder

自编码说白了就是一个特征提取器&#xff0c;也可以看作是一个降维器。下面找了一张很丑的图来说明自编码的过程。 自编码分为压缩和解码两个过程。从图中可以看出来&#xff0c;压缩过程就是将一组数据特征进行提取&#xff0c; 得到更深层次的特征。解码的过程就是利用之前的…

详细介绍下路由器中的WAN口

路由器的 WAN 口&#xff08;Wide Area Network port&#xff09;是指用于连接广域网&#xff08;WAN&#xff09;的接口。它是路由器与外部网络&#xff08;如互联网&#xff09;之间的物理连接点&#xff0c;允许路由器与互联网服务提供商&#xff08;ISP&#xff09;或其他广…

风车时间锁管理 - 构建IPA文件加锁+签名+管理一站式解决方案

时间锁管理&#xff1a;是一种用于控制对某些资源、功能或操作的访问权限的机制&#xff0c;它通过设定时间限制来限制对特定内容、系统或功能的访问或执行&#xff0c;以提高安全性和控制性&#xff0c;时间锁管理常见于以下场景&#xff1a; 1. 文件或文档的保密性&#xff…

浏览器代理解决方案

当谈到网络浏览器&#xff0c; 浏览器 无疑是最受欢迎和广泛使用的选项之一。然而&#xff0c;你可能已经注意到&#xff0c; 浏览器并不原生支持 SOCKS5 代理协议。不过&#xff0c;别担心&#xff01;在本文中&#xff0c;我将与你分享一些解决方案&#xff0c;让你能够在 浏…

【C++初阶】动态内存管理

​&#x1f47b;内容专栏&#xff1a; C/C编程 &#x1f428;本文概括&#xff1a; C/C内存分布、C语言动态内存管理、C动态内存管理、operator new与operator delete函数、new和delete的实现原理、定位new表达式、常见面试问题等。 &#x1f43c;本文作者&#xff1a; 阿四啊 …