JS花里胡哨的日志打印

2023-10-23 11:59
文章标签 日志 js 打印 花里胡哨

本文主要是介绍JS花里胡哨的日志打印,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JS花里胡哨的日志打印

分享一个自己在无聊的时候写的axios请求错误日志打印美化,有什么新奇的想法欢迎各位大佬们评论区补充。

效果图

默认颜色效果
在这里插入图片描述
随机颜色效果
在这里插入图片描述

使用方式
import { reqErrLog  } from '*.js'
import axios from 'axios'const ins = axios.create({baseUrl: process.env.VUE_APP_BASE_URL,timeout: 10 * 1000
})ins.interceptors.response.use(response => {const { data, config } = response;// 处理异常返回码if (data.code === 500) {reqErrLog(config, data);return Promise.reject(data)}return data
})
代码实现
/*** 花里胡哨请求日志打印* @param {Object} config 请求设置* @param {Object} repData 请求返回结果* @param {Array} ext 拓展打印信息* @param {Array} skin 皮肤数组* @param {Boolean} showDefSkin 是否显示默认配色*/
export const reqErrLog = (config, repData, ext = [], skin = [], showDefSkin = true) => {const baseURL = process.env.VUE_APP_BASE_URL// 皮肤样式rbg色值const defaultSkin = [[9, 176, 233],[171, 146, 212],[169, 193, 238],[51, 60, 130],[252, 169, 127],[140, 219, 229],[99, 190, 205],[244, 98, 134]]const logSkin = skin.length ? skin : defaultSkin// 日志样式const logStyle = (color, size) => {return [`color: rgb(${color.join(',')})`,`font-size: ${size}px`,`text-shadow: 1px 1px 3px rgba(${color.join(',')}, .6)`].join(';')}// 随机生成rgb颜色const generateColor = () => {return new Array(3).fill(0).map(() => Math.ceil(Math.random() * 255))}// 打印信息let infoGroup = [{label: '请求接口',size: 12,content: baseURL + config.url}, {label: '请求方法',size: 12,content: config.method.toUpperCase(),}, {label: '请求参数',size: 12,content: JSON.stringify(config.params)}, {label: '请求数据',size: 12,content: JSON.stringify(config.data)}, {label: '请求头部',size: 12,content: JSON.stringify(config.headers)}, {label: '错误代码',size: 12,content: repData?.error_code}, {label: '错误信息',size: 12,content: repData?.msg}, {label: '请求时间',size: 12,content: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`}, ...ext]infoGroup = infoGroup.map((item, index) => {item.color = showDefSkin? logSkin[index + 1 > logSkin.length? (index + 1) % logSkin.length: index]: generateColor()return item})console.group(config.url + '请求错误')for (const key in infoGroup) {const { label, color, size, content } = infoGroup[key]console.info(`%c${label}: %s`, logStyle(color, size), content)}console.groupEnd()
}

这篇关于JS花里胡哨的日志打印的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/267690

相关文章

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

深度解析Nginx日志分析与499状态码问题解决

《深度解析Nginx日志分析与499状态码问题解决》在Web服务器运维和性能优化过程中,Nginx日志是排查问题的重要依据,本文将围绕Nginx日志分析、499状态码的成因、排查方法及解决方案展开讨论... 目录前言1. Nginx日志基础1.1 Nginx日志存放位置1.2 Nginx日志格式2. 499

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》:本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式(以 G1 为例)1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆

MySQL 打开binlog日志的方法及注意事项

《MySQL打开binlog日志的方法及注意事项》本文给大家介绍MySQL打开binlog日志的方法及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、默认状态二、如何检查 binlog 状态三、如何开启 binlog3.1 临时开启(重启后失效)

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关