设置一个好的网站导航栏,装饰网站模版,wordpress 畅言 右下角链接,临淄房产信息网1231. 前言
在一些业务系统中#xff0c;由于集成的平台产物或工具较多#xff0c;而这些产物的 log 不收敛#xff0c;很多时候打开控制台就是满屏的 log#xff0c;自己的 log 需要在满屏的 log 中查找#xff0c;或者在 log 上加一些前缀用 Filter 去过滤#xff0c;严重…1. 前言
在一些业务系统中由于集成的平台产物或工具较多而这些产物的 log 不收敛很多时候打开控制台就是满屏的 log自己的 log 需要在满屏的 log 中查找或者在 log 上加一些前缀用 Filter 去过滤严重影响效率。
别人的 log 是动不了了那自己的 log 是否可以收敛起来自动加前缀自动按日志级别显隐功能全一点样式好看一些即便你的项目被别人集成了也能能清晰的知道日志是谁发出来的。
npm 上找了一些 logger要么功能不全要么不够醒目。做个 logger 也没几行代码就写了下面这个库。
2. Lp-Logger
浏览器端 logger 工具颜色是从 AntD 的色彩规范中找的。
2.1 API
declare module lp-logger {type Level error | warn | log;interface IProp {level?: Level;name?: string;search?: string;}export default class Logger {constructor(prop?: IProp);log(...args: any[]): void;warn(...args: any[]): void;error(...args: any[]): void;debug(...args: any[]): void;groupCollapsed(...args: any[]): void;groupEnd(...args: any[]): void;}
}2.1.1 构造方法
名称说明默认值level日志级别。用于控制哪些类型的日志类型可以显示。 error: 只显示 errorwarn: 显示 warn/errorlog: 显示所有。当有search 的 URL 查询参数时search 的优先级最高。“log”name输出日志中颜色块的上文本。可以为不同项目、页面指定不同的 name方便筛选和说明来源。“lp-logger”search用于通过 URL 参数控制显示级别值与 level 的一致“__lp_logger_level”
2.2 安装
支持 CDN 安装和 NPM 安装。
script srchttps://unpkg.com/lp-logger/scriptscript// new LpLogger();
/script2.2.2 NPM 安装
npm i -S lp-logger2.3 使用
2.3.1 信息分组
import LpLogger from lp-logger;const logger new LpLogger({name: 项目A,
});logger.groupCollapsed(折叠信息1);logger.log(log);logger.groupCollapsed(折叠信息2);logger.error(error);logger.debug(debug);logger.groupEnd(end);logger.warn(warn);
logger.groupEnd(end);2.3.2 只显示错误和警告信息
import LpLogger from lp-logger;const logger new LpLogger({name: 项目B,level: warn,
});logger.log(log);
logger.error(error);
logger.debug(debug);
logger.warn(warn);2.3.3 URL 控制显示
import LpLogger from lp-logger;const logger new LpLogger({name: 项目C,level: , // 空字符串时不显示任何信息search: __lp_logger_level, // 配置 URL 控制参数
});logger.log(log);
logger.error(error);
logger.debug(debug);
logger.warn(warn);URL 控制参数优先级最高所以日志正常显示 Github Repo: https://github.com/lecepin/lp-logger
