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:?只顯示?error，warn:?顯示?warn/error，log:?顯示所有）。當有search?的?URL?查詢參數時，search?的優先級最高。	“log”
name	輸出日志中，顏色塊的上文本。可以為不同項目、頁面指定不同的?name，方便篩選和說明來源。	“lp-logger”
search	用于通過?URL?參數控制顯示級別，值與?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: "項目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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。