@telanks/logger v1.0.11

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

gitee地址 npm地址

演示

安装

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

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

CDN 线上引入

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

NPM

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

使用

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

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

全局的打印日志

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

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

全局的配置项

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

实例化

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

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

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

获取日志

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

用 vue element-ui 举例

<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]

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

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