# logger

**Repository Path**: binary_development_chenshuai7685780/logger

## Basic Information

- **Project Name**: logger
- **Description**: 前端日志记录
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-05-30
- **Last Updated**: 2023-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> logger 是一个 web 前端日志记录系统，提供持久化日志记录，通过隐藏式操作来展示日志记录方便排查问题。

[gitee地址](https://gitee.com/taxilng/logger/tree/master/)
[npm地址](https://www.npmjs.com/package/@telanks/logger)

# 演示
[![ofNron.png](https://s1.ax1x.com/2021/12/09/ofNron.png)](https://imgtu.com/i/ofNron)

# 安装

## 直接用 `<script>` 全局引入 会暴露一个 `logger` 全局变量。

```js
<script src="./node_modules/@telanks/logger/dist/index.umd.js"></script>
```

## CDN 线上引入

```JS
<script src="https://cdn.jsdelivr.net/npm/@telanks/logger@1.0.5/dist/index.umd.min.js"></script>
```

## NPM

```bash
# 最新版本
$ yarn add @telanks/logger
```

# 使用

当然使用 webpack 等打包工具时，可以这样引入

```js
// ES module
import logger from "@telanks/logger"
// CommonJS
const logger = require("@telanks/logger")
```

> 全局的打印日志

```js
logger.info("普通信息")
logger.warn("警告！")
logger.error("错误！")

log.setLog({ message: `【电话权限】用户拥有电话权限` })
log.setLog({ message: `【电话权限】用户无电话权限`, level: "warn" })
```

> 全局的配置项

```js
logger.configure({
  name: "fruit", // 更改存储的名称，修改localStorage key
  logMaxLength: 10, // 日志最大存储条数 10条
  isShowConsole: true // 是否在 console上面打印，默认值 false
})
```

> 实例化

当应用规模较大时，需要在不同的场景下打印不同的日志时，可以存储在不同的位置

```js
const driverLog = logger.creatLogger({ name: "driver", logMaxLength: 5, isShowConsole: true })

driverLog.info("【开始】进入驾驶舱")
driverLog.setLog({ message: `【故障】车辆引擎故障`, level: "error" })
```

> 获取日志

```js
logger.getLog() // 获取当前日志
```

用 vue element-ui 举例

```html
<template>
  <div>
    <el-button type="primary" @click="printLogger">快速点击8下打印日志</el-button>
    <ul class="call_box">
      <li v-for="(item, index) in logList" :key="index">
        <span class="timer">{{item.timer}}</span>
        <span :class="{ error: item.level == 'error', warning: item.level == 'warn', start: item.level == 'start' }">{{item.message}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
  import logger from "@telanks/logger"
  export default {
    data () {
      return {
        logList: [],
      }
    },
    methods: {
      printLogger () {
        logger.continuousClick(() => {
          this.logList = logger.getLog() // 获取日志
        })
      },
    }
  }
<script>
<style lang="stylus" scoped>
.call_box {
  margin-top: 20px;
  font-size: 12px;
  height: 80vh;
  overflow-y: auto;
  word-break: break-all;

  li {
    margin: 2px;
    border-bottom: 1px solid #eee;

    .timer {
      color: gray;
    }

    .error {
      color: red;
    }

    .warning {
      color: orange;
    }

    .start {
      color: blue;
    }
  }
}
</style>
```

### logger.continuousClick(callback, option)

- **参数**：

  - `{Function} [callback]`
  - `{Object} [option]`

- **用法**：
  快速点击触发的回调函数

```js
logger.continuousClick(
  () => {
    console.log("恭喜你点击了10次")
  },
  {
    maxCount: 10, // 需要点击的次数
    interval: 300 // 每一次点击的间隔时间，毫秒
  }
)
```