在生产环境下,console的输出一般是被屏蔽的尽可能不暴露出来,但有时候难免需要查看下log状态,来捕获一些问题情况
在上诉场景下,我们需要对console进行二次封装引用
或者覆盖console
,以达到我们需要的效果;
这里演示一个不需要覆盖console的方式:
(function (isDebug) {
const logsServiceUnit = {
isDebug: false,
_log: function (level) {
let _any = [...arguments].filter((value, key) => key > 0);
_any.unshift(`[${level}]`)
if (this.isDebug === true) {
if (level === 'debug') {
this.debug.apply(logsServiceUnit, _any);
return;
}
}
console[level].apply(console, _any)
},
debug: function () {
let _any = [...arguments].filter((value, key) => key > 0);
_any.unshift(`[debug]`)
console.log.apply(console, _any)
},
setDebug: function (isDebug) {
this.isDebug = isDebug ? isDebug : false;
},
clear: function () {
console.clear();
}
}
const logsHandler = {};
window.Logs = new Proxy({
setDebug: function (isDebug) {logsServiceUnit.setDebug(isDebug)},
log: function(...any){logsServiceUnit._log('log', ...any)},
info: function(...any){return logsServiceUnit._log('info', ...any)},
debug: function(...any){return logsServiceUnit._log('debug', ...any)},
warn: function(...any){return logsServiceUnit._log('warn', ...any)},
error: function(...any){return logsServiceUnit._log('error', ...any)},
time: function(...any){return logsServiceUnit._log('time', ...any)},
timeEnd: function(...any){return logsServiceUnit._log('timeEnd', ...any)},
trace: function(...any){return logsServiceUnit._log('trace', ...any)},
clear: logsServiceUnit.clear,
}, logsHandler);
window.Logs.setDebug(isDebug);
})(false);
使用方式:
// 控制是否展示输出
Logs.setDebug(true)
// 常用/常见的log:
Logs.log('log', ["test", {"testB":1}])
Logs.debug('debug')
Logs.warn('warn')
Logs.error('error')
其实现成的log库也有,例如Tencent/vConsole