Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lecepin/lp-logger
Browser multi-function logger
https://github.com/lecepin/lp-logger
browser console logger logging-library
Last synced: 4 days ago
JSON representation
Browser multi-function logger
- Host: GitHub
- URL: https://github.com/lecepin/lp-logger
- Owner: lecepin
- Created: 2021-08-10T13:15:42.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-26T10:10:48.000Z (7 months ago)
- Last Synced: 2024-10-06T19:17:31.042Z (about 1 month ago)
- Topics: browser, console, logger, logging-library
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lp-logger
[](https://npmjs.com/package/lp-logger)
[](https://npmjs.com/package/lp-logger)
浏览器端 logger 工具。
## 1.API
```ts
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;
}
}
```
#### 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 安装
```html
// new LpLogger();
```
### 2.2 NPM 安装
```
npm i -S lp-logger
```
## 3.使用
#### 3.1 折叠信息
```js
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");
```
#### 3.2 只显示错误和警告信息
```js
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");
```
#### 3.3 URL 控制显示
```js
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 控制参数优先级最高，所以日志正常显示：
