前端日志记录

背景

移动端项目如何快速定位线上上线项目出现的各种异常

项目上线的一些限制

• 线上代码压缩合并
• 服务器无法上传.sourcemap文件
• 线上项目会把console.log全部干掉
• 移动端没有调试工具

解决（分模块记录日志）

导入vk-lcloger模块正确方法和使用:

import {getLogInstance,VKConsole} from 'vk-log';

// 获取日志对象
let bugout = getLogInstance('vk-a')
// 记录日志
bugout.log('xxx')
bugout.log('000')
bugout.log(new Date())

let bugout2 = getLogInstance('vk-b')
bugout2.log('vipkid log...');

// 显示日志面板
VKConsole.getInstance().init()

// 获取所有模块日志
window.getLogModule()
// 获取'vk-a'模块日志
window.getLogModule('vk-a').getLog()

引用vk-lcloger.js正确方法和使用:

<script type="text/javascript" src="vk-lcloger.js"></script>

// 获取日志对象
let bugout = vk.getLogInstance('vk-a')
bugout.log('xxx')
bugout.log('000')
bugout.log(new Date())

let bugout2 = vk.getLogInstance('vk-b')
bugout2.log('vipkid log...');

// 显示日志面板
vk.VKConsole.getInstance().init()

// 获取日志
window.getLogModule('vk-a').getLog()

日志对象属性

• realTime 实时输出到虚拟日志面板（默认false）
• maxDepth 日志对象的最大递归深度（默认25，禁止循环引用）
• autoTrim 为了避免日志占用潜在的无穷无尽的内存（默认true）
• maxLines 如果autoTrim为真，那么最多将保存maxLines条日志（默认100）

日志对象方法

• log()- 记录日志，同时console.log()
• getLog() - 返回整个日志。
• tail(numLines) - 返回日志的最后X行，其中X是您传递的数字。默认为100。
• getSlice(start, numLines) - 获取日志的“切片”。通过起跑线和你想要的后面几行
• clear() - 清除日志。