1.?前言

在一些業(yè)務(wù)系統(tǒng)中，由于集成的平臺(tái)產(chǎn)物或工具較多，而這些產(chǎn)物的?log?不收斂，很多時(shí)候打開控制臺(tái)就是滿屏的?log，自己的?log?需要在滿屏的?log?中查找，或者在?log?上加一些前綴用?Filter?去過濾，嚴(yán)重影響效率。

別人的?log?是動(dòng)不了了，那自己的?log?是否可以收斂起來，自動(dòng)加前綴，自動(dòng)按日志級(jí)別顯隱，功能全一點(diǎn)，樣式好看一些，即便你的項(xiàng)目被別人集成了，也能能清晰的知道日志是誰(shuí)發(fā)出來的。

npm?上找了一些?logger，要么功能不全，要么不夠醒目。做個(gè)?logger?也沒幾行代碼，就寫了下面這個(gè)庫(kù)。

2. Lp-Logger

瀏覽器端?logger?工具，顏色是從?AntD?的色彩規(guī)范中找的。

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?構(gòu)造方法

名稱說明默認(rèn)值

level	日志級(jí)別。用于控制哪些類型的日志類型可以顯示。?（error:?只顯示?error，warn:?顯示?warn/error，log:?顯示所有）。當(dāng)有search?的?URL?查詢參數(shù)時(shí)，search?的優(yōu)先級(jí)最高。	“l(fā)og”
name	輸出日志中，顏色塊的上文本。可以為不同項(xiàng)目、頁(yè)面指定不同的?name，方便篩選和說明來源。	“l(fā)p-logger”
search	用于通過?URL?參數(shù)控制顯示級(jí)別，值與?level?的一致	“__lp_logger_level”

2.2?安裝

支持?CDN?安裝和?NPM?安裝。

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

2.2.2?NPM?安裝

npm i -S lp-logger

2.3?使用

2.3.1?信息分組

import LpLogger from "lp-logger";const logger = new LpLogger({name: "項(xiàng)目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?只顯示錯(cuò)誤和警告信息

import LpLogger from "lp-logger";const logger = new LpLogger({name: "項(xiàng)目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: "項(xiàng)目C",level: "", // 空字符串時(shí)，不顯示任何信息search: "__lp_logger_level", // 配置 URL 控制參數(shù) });logger.log("log"); logger.error("error"); logger.debug("debug"); logger.warn("warn");

URL?控制參數(shù)優(yōu)先級(jí)最高，所以日志正常顯示：

---

Github Repo: https://github.com/lecepin/lp-logger

總結(jié)

以上是生活随笔為你收集整理的调试利器：浏览器 Logger的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。