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

news2024/11/26 13:29:21

控制台日志打印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.coloradmin.cn/o/1020074.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

以神龙出行小程序为例,说一些网站技术

注册和登录功能: 用户注册和登录可以使用手机号验证、第三方登录等方式来实现。这需要与后台服务器进行数据交互,并进行身份验证。 数据存储和管理: 用户的个人信息和常用地址需要进行存储和管理。这可以通过数据库来实现,如关系…

【八大经典排序算法】冒泡排序

【八大经典排序算法】冒泡排序 一、概述二、思路解读三、代码实现四、优化 一、概述 冒泡排序由于其简单和易于理解,使其成为初学者学习排序算法的首选,也是初学者接触到的第一个排序算法。其原理是通过重复交换相邻的元素来将最大的元素逐步“冒泡”到…

Python数据库编程:连接、操作和管理数据库

💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 Python作为一门多用途的…

前端screenfull实现界面全屏展示功能

还是先引入依赖 我们要先执行 npm config set registry https://registry.npmjs.org/将本地npm registry地址设置为官方的npm registry地址 不然这个东西安装会有点问题 然后我们执行命令安装 npm install screenfull安装完之后 我们终端执行一下 npm config delete registr…

华为云HECS云服务器docker环境下安装redis

当前有个华为云HECS云服务器,已经安装了docker环境,准备下docker环境下安装redis。 一、HECS云服务器安装docker 登录华为HECS云服务器,安装docker环境。 安装docker参考如下文章: 华为云HECS安装docker并安装mysql-CSDN博客 …

构建个人图床云盘—EasyImage的简单部署及远程访问配置

文章目录 1.前言2. EasyImage网站搭建2.1. EasyImage下载和安装2.2. EasyImage网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2 Cpolar内网穿透本地设置 4. 公网访问测试5. 结语 1.前言 一个好的图床,是网站或者文章图片能稳定显示的关键&…

ros---服务端和客户端

服务模型&#xff1a; 想对于发布订阅模型的区别&#xff1a;请求一次才会接收一次&#xff0c;而不是不断的发布。 自定义服务数据 1.定义srv文件 2.在package.xml中添加功能包依赖 <build_depend>message_generation</build_depend> <exec_depend>mess…

商业大厦为什么要烟感监控?一篇看懂

烟感监控在现代商业大厦的安全体系中扮演着至关重要的角色。随着城市化的不断发展和商业大厦的不断增多&#xff0c;建筑物内的火灾风险也相应增加。 因此&#xff0c;采取有效的烟感监控措施&#xff0c;以及建立快速响应火警的机制&#xff0c;对于保护人员生命安全和财产安全…

Java之String类

作者简介&#xff1a; zoro-1&#xff0c;目前大二&#xff0c;正在学习Java&#xff0c;数据结构等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; Java之String类 String的构造String底层String之间…

【计算机毕业设计】基于SpringBoot+Vue的流浪猫狗救助救援网站的设计与实现

博主主页&#xff1a;一季春秋博主简介&#xff1a;专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发&#xff0c;远程调试部署、代码讲解、文档指导、ppt制作等技术指导。主要内容&#xff1a;毕业设计(Java项目、小程序等)、简历模板、学习资料、面试题…

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

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

前后端分离vue简介

vue简介 vue是一个渐进式js框架&#xff0c;用于构建用户界面&#xff0c;其主要特点是易学易用、轻量、灵活和高效。Vue.js由前Google工程师尤雨溪&#xff08; Evan You&#xff09;在2014年创建&#xff0c;它的核心库只关注视图层&#xff0c;是一款非常优秀的MVVM框架&…

大数据驱动业务增长:数据分析和洞察力的新纪元

文章目录 大数据的崛起大数据的特点大数据技术 大数据驱动业务增长1. 洞察力和决策支持2. 个性化营销3. 风险管理4. 产品创新 大数据分析的新纪元1. 云计算和大数据示例代码&#xff1a;使用AWS的Elastic MapReduce&#xff08;EMR&#xff09;进行大数据分析。 2. 人工智能和机…

通过内网穿透实现远程连接群晖Drive,轻松实现异地访问群晖NAS

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

一些文档上传网站实现原理的分析

背景说明 很多网站都有文档上传功能&#xff0c;如百度文库&#xff0c;原创力&#xff0c;当然也有宇宙闻名的CSDN小猴子网站。如果我们要批量大规模上传文档&#xff0c;手工方式比较低效。自动上传的话&#xff0c;又缺乏网站的API&#xff0c;那只能自己分析上传流程&…

vue中slot,slot-scope,v-slot的用法和区别

slot用于设置标签的属性值(slot“title”)slot-scopev-slot slot <el-menu-item v-if"!navMenu.children" :key"navMenu.id" :index"navMenu.id " click"itemClick(navMenu)" ><span slot"title">{{ navMenu.…

2023-09-18 monetdb-GDK和BAT-分析与思考

摘要: GDK作为moentdb的最核心的内核, 可以看作是物理计划的执行, 以及与磁盘IO直接进行交互. 而物理列的数据结构, 就是BAT. 所以GDK也可以看作是对BAT的操作的模块, BAT是GDK操作的对象, 是GDK的一部分. GDK和BAT的名字其实无关紧要, 重要的是这些模块所承载的功能. GDK: …

【LeetCode-简单题】剑指 Offer 58 - II. 左旋转字符串

文章目录 题目方法一&#xff1a;连续双指针翻转 题目 方法一&#xff1a;连续双指针翻转 class Solution {public String reverseLeftWords(String s, int n) {StringBuffer sb new StringBuffer(s);reverseWord(sb,0,n-1);reverseWord(sb,n,sb.length()-1);return sb.revers…

Linux kernel之中断

Linux内核中断顶半部和中断底半部 设备的中断会打断内核进程中的正常调度和运行&#xff0c;系统对更高吞吐率的追求势必要求中断服务程序尽量短小精悍。但是&#xff0c;这个良好的愿望往往与现实并不吻合。在大多数真实的系统中&#xff0c;当中断到来时&#xff0c;要完成的…

markdown工具Atom预览与插件安装

​atom是以命令行作为插件选项的入口 打开命令输入框 Windows: ctrl shift p Mac: command shift p 输入命令安装 输入 markdown preview toggle &#xff0c;可以偷懒只输入mdpt(模糊匹配) 按enter键即可看到预览&#xff0c;如图&#xff0c;左边编辑&#xff0c;右…