前端console.log的日志tips-上线
2018-04-19 本文已影响0人
kamiSDY
我们在项目开发中，在前端经常使用console来对一些bug和信息进行调试。例如：
console.log(infoMsg);
console.error(errMsg);
但是，如果项目上线的话。这些debug信息并不想让用户知道。又不能简单暴力的删除掉。我们就设想，要么重定向到log中，要么能够有一个开关来进行是否打印的控制。
开关控制
最简单暴力的方法，就可以写一个全局变量读取config文件的控制量。然后包装一个_console,封装一下console对应的方法。
这里有个小的示例：
function _console(data){
if(App.env == "production" || !window.console) return;
console.log.call(console, data);
return;
};
如果是生产环境，那么就不打印。这个方法可以写的更加优美，并适用于各种level的打印方法。
或者重写一些方法或者添加一些行为：
// define a new console
var console=(function(oldCons){
return {
log: function(text){
oldCons.log(text);
// Your code
},
info: function (text) {
oldCons.info(text);
// Your code
},
warn: function (text) {
oldCons.warn(text);
// Your code
},
error: function (text) {
oldCons.error(text);
// Your code
}
};
}(window.console));
//Then redefine the old console
window.console = console;
只是不能处理多参数的情况。期待各位做一下enhance的工作。
或者，可以在一个顶级js文件中，利用开关将console进行重写。
window.global = {};
global.console = console;
global.originConsole = {};
//save the origin console func
global.originConsole.log = console.log;
global.originConsole.error = console.error;
global.debug = function(flag){
if(flag){
global.console.log = ()=>{};
global.console.error = ()=>{};
...//more func type
}else{
global.console.log = global.originConsole.log;
global.console.error = global.originConsole.error;
... // more function type
}
}
这个表示什么都不输出，你也可以写成其他的方式。比如说写成log文件。
如果想关闭，就可以在浏览器的console中输入debug(true)，就可以关闭log打印。反之则开启。
console.log = function() {
//do what you want...
}
这里增加一些技巧。比如说如果想恢复之前的log方法，可以在更改之前将其保存在一个变量中：
//saving the original console.log function
var preservedConsoleLog = console.log;
当然，任何方法都可以保存下来。
这里给出一个复写全部方法的写法：
var consoleHolder = console;
function debug(bool){
if(!bool){
consoleHolder = console;
console = {};
Object.keys(consoleHolder).forEach(function(key){
console[key] = function(){};
})
}else{
console = consoleHolder;
}
}
debug(false);
或者说，多开关控制log和其他level：
var GlobalDebug = (function () {
var savedConsole = console;
return function(debugOn,suppressAll){
var suppress = suppressAll || false;
if (debugOn === false) {
console = {};
console.log = function () { };
if(suppress) {
console.info = function () { };
console.warn = function () { };
console.error = function () { };
} else {
console.info = savedConsole.info;
console.warn = savedConsole.warn;
console.error = savedConsole.error;
}
} else {
console = savedConsole;
}
}
})();
使用globalDebug(false)关闭log；使用globalDebug(false,true)关闭所有console的输出。
其他解决方案
debugout.js
其提供了比较强大的console log处理功能。
Github地址为debugout.js，其有一个demo。
picolog.js
其也是封装了console的功能。但是增加了一个属性（日志level）：
log.NONE; // 0
其表示，不去打印所有的log。相当于开关控制。
Github地址为picolog.js。
