前端日志调试工具

一个前端调试的美化插件

使用方式

下载

npm install rd-web-logger

js 环境

import log from 'rd-web-logger';
log.info('rdapp ~ Code.js ~ startUp', '打印信息');

vue 环境

// 将log绑定在vue的原型上
import log from 'rd-web-logger';
vue.prototype.$log = log;

// vue文件中
export default {
    data() {
        return {
            number: 555,
        }
    },
    mounted() {
       this.$log.info('rdapp ~ App.vue ~ mounted', this.number);
    },
};

全局使用 由于此插件可能会在项目任何文件中都使用到，不管是引入还是挂在类实例下都比较麻烦，所以可以通过 webpack 的 ProvidePlugin 插件，注入到全局使用

以vue-cli4配置为例

//vue.config.js
module.exports = {
    //**其他配置项
    chainWebpack: config => {
        // 全局日志插件
        config.plugin('provide').use(webpack.ProvidePlugin, [
            {
                // {自定义变量名称: npm模块（模块需遵循commjs规范）}
                log: 'rd-web-logger',
            },
        ]);
    }
}

如果配置了eslint的话，需要在.eslintrc下增加全局变量
// .eslintrc.js
module.exports = {
    globals: {
        log: true
    },
}

功能一览

功能一览中的代码示例默认为 vue 开发环境，且 log 方法已作为全局方法挂在 vue 原型上

日志级别

log 的 init 方法修改 logLevel 可设置日志级别，关闭部分或全部日志打印

log.init({ 
    closeDebug: false, // 是否启用 Debug 日志
    closeAll: false, // 是否关闭所有日志打印
    logLevel: 3 // 日志级别
})

具体禁用类型如下：

| logLevel | 禁用日志类型 | 备注 | | ---------- | ------------------------------------------------------------ | ------------------- | | 0 | 所有 | 等同于 closeAll | | 1 | info debug assert list trace time timeLog timeEnd ref table | | | 2 | debug | 等同于 closeDebug | | 3 | 无 | default |

基础日志类型

info

基础日志输出类型，最基础的日志输出类型，参数与 ==console.log()== 一致

this.$log.info('测试info', this.number);

warn

提醒日志输出类型，在有一定风险的操作但不会影响整个流程时使用，参考 ==conosle.warn()== 使用；调试窗口会带提醒图标，可查看代码上下文信息

this.$log.warn('测试warning', this.number);

error

错误提示输出类型，用于错误捕获的场景；调试窗口会带错误图标，可查看代码上下文信息

try {
    throw Error('132');
} catch (error) {
    this.$log.error('测试error', error);
}

fatal

最高级别的错误输出类型，用于项目或者模块初始化失败等严重错误场景；调试窗口会带错误图标，可查看代码上下文信息

try {
    // 方法逻辑执行
    throw Error('项目启动失败');
} catch (error) {
    this.$log.fatal('测试fatal', error);
}

success

成功输出类型，用于方法或者流程执行成功的场景

this.$log.success('测试success', this.number);

danger

错误输出类型，用于捕获错误，不会在调试器里显示 error

this.$log.danger('测试danger', this.number);

debug

基本输出类型，用于代码或者数据调试，不会在调试器里显示 error 或 warning

this.$log.debug('测试debug', this.number);

start、collapse、end

日志分组，用于某个流程下的日志打印，例如说对项目初始化的日志进行分组；

start、collapse 都是开启日志分组，二者的区别是 collapse 创建的分组默认是折叠起来的，start 创建的分组默认是展开的

• 支持最大 7 层分组；
• 如果在执行 start 方法后，当前浏览器下的所有调试日志都会进入分组中，所以 start 后一定要及时执行 end 方法对分组进行关闭；

// start的第一个参数相当于标识【必填】，后面属于自定义内容
log.collapse('RD ~ Core ~ 测试分组层级');
    log.start('111');
        log.start('222');
            log.start('333');
                log.start('444');
                    log.start('555');
                        log.start('666');
                            // collapse也相当于一层，所以log.start('777')将报错👇
                            log.start('777');
                            log.end();
                        log.end();
                    log.end();
                log.end();
            log.end();
        log.end();
    log.end();
log.end();

其他日志类型

其他类型不支持对样式进行美化操作，属于 window.console 下内置的方法

trace

输出当前方法的执行链，用于有多层方法嵌套的情况

const doSubTask = (countX, countY) => {
    // eslint-disable-next-line no-plusplus
    let a = 0;
    for (let i = 0; i < countX; i++) {
        // eslint-disable-next-line no-plusplus
        for (let j = 0; j < countY; j++) {
            a += 1;
        }
    }
    return a;
};

const doTask = () => doSubTask(1000, 10000);
const total = doTask();
this.$log.trace(total);

assert

断言输出，当不满足条件的时候会在调试器里显示错误信息调试窗口会带错误图标，可查看代码上下文信息

this.$log.assert(1 > 2, '1大于2为false时才显示');

table

在调试器里以 table 方式展示数据，能自定义需要显示的字段，可以手动调整排序便于查看数据；但是此方法有部分缺陷，显示的数据不能超过 1000 条；只能显示一层的数据，如果是[{id:1,info:{name:'tom'}},{id:2,info:{name:'jerry'}}]这种，info 就无法显示出来；

this.$log.table(this.list, ['path', 'storageKind', 'createTime']);

time、timeLog、timeEnd

性能监测工具，用于监测一些方法的执行时间

// time, timeLog, timeEnd三个方法的第一个参数必填，相当于唯一标识
// 启动时间记录
this.$log.time('testRunTime');
setTimeout(() => {
    // 获取时间过去了多久
    this.$log.timeLog('testRunTime', '获取当前时间');
}, 1000);
setTimeout(() => {
    // 结束时间记录
    this.$log.timeEnd('testRunTime');
}, 2000);

ref

打印 dom，用于前端开发中打印一些元素或者 vue 组件的信息

// template
<template>
    <div class="home">
        <el-button ref="btn">登录模拟</el-button>
        <div id="testApp">app</div>
    </div>
</template>

// js
// 输出vue组件
this.$log.ref(this.$refs.btn);
// 输出dom
this.$log.ref(document.querySelector('#testApp'));

vue 组件 👇 dom👇