lp-logger

浏览器端 logger 工具。

1.API

1declare module "lp-logger" {
2  type Level = "error" | "warn" | "log";
3
4  interface IProp {
5    level?: Level;
6    name?: string;
7    search?: string;
8  }
9
10  export default class Logger {
11    constructor(prop?: IProp);
12    log(...args: any[]): void;
13    warn(...args: any[]): void;
14    error(...args: any[]): void;
15    debug(...args: any[]): void;
16    groupCollapsed(...args: any[]): void;
17    groupEnd(...args: any[]): void;
18  }
19}

1.1 构造方法

constructor({
    level,
    name,
    search
})

名称	说明	默认值
level	日志级别。用于控制哪些类型的日志类型可以显示。 （error: 只显示 error，warn: 显示 warn/error，log: 显示所有）。当有search 的 URL 查询参数时，search 的优先级最高。	log
name	输出日志中，颜色块的上文本	lp-logger
search	用于通过 URL 参数控制显示级别，值与 level 的一致	__lp_logger_level

1.2 实例方法

名称	说明
log	同 console.log
warn	同 console.warn
error	同 console.error
debug	同 console.debug
groupCollapsed	同 console.groupCollapsed，用于创建 log 折叠分组，可嵌套折叠
groupEnd	同 console.groupEnd，用于关闭 log 折叠分组

2.安装

支持 CDN 安装和 NPM 安装。

2.1 CDN 安装

1<script src="https://unpkg.com/lp-logger"></script>
2
3<script>
4  // new LpLogger();
5</script>

2.2 NPM 安装

npm i -S lp-logger

3.使用

3.1 折叠信息

1import LpLogger from "lp-logger";
2
3const logger = new LpLogger({
4  name: "项目A",
5});
6
7logger.groupCollapsed("折叠信息1");
8  logger.log("log");
9  logger.groupCollapsed("折叠信息2");
10    logger.error("error");
11    logger.debug("debug");
12  logger.groupEnd("end");
13  logger.warn("warn");
14logger.groupEnd("end");

3.2 只显示错误和警告信息

1import LpLogger from "lp-logger";
2
3const logger = new LpLogger({
4  name: "项目B",
5  level: "warn",
6});
7
8logger.log("log");
9logger.error("error");
10logger.debug("debug");
11logger.warn("warn");

3.3 URL 控制显示

1import LpLogger from "lp-logger";
2
3const logger = new LpLogger({
4  name: "项目C",
5  level: "", // 空字符串时，不显示任何信息
6  search: "__lp_logger_level", // 配置 URL 控制参数
7});
8
9logger.log("log");
10logger.error("error");
11logger.debug("debug");
12logger.warn("warn");

URL 控制参数优先级最高，所以日志正常显示：