我們在項(xiàng)目開發(fā)中拭卿，在前端經(jīng)常使用console來對一些bug和信息進(jìn)行調(diào)試墨礁。例如：
console.log(infoMsg);
console.error(errMsg);
但是醋奠，如果項(xiàng)目上線的話榛臼。這些debug信息并不想讓用戶知道。又不能簡單暴力的刪除掉窜司。我們就設(shè)想沛善，要么重定向到log中，要么能夠有一個(gè)開關(guān)來進(jìn)行是否打印的控制例证。
開關(guān)控制
最簡單暴力的方法，就可以寫一個(gè)全局變量讀取config文件的控制量迷捧。然后包裝一個(gè)_console,封裝一下console對應(yīng)的方法织咧。
這里有個(gè)小的示例：
function _console(data){
if(App.env == "production" || !window.console) return;
console.log.call(console, data);
return;
};
如果是生產(chǎn)環(huán)境，那么就不打印漠秋。這個(gè)方法可以寫的更加優(yōu)美笙蒙，并適用于各種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;
只是不能處理多參數(shù)的情況庆锦。期待各位做一下enhance的工作捅位。
或者，可以在一個(gè)頂級js文件中，利用開關(guān)將console進(jìn)行重寫艇搀。
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
}
}
這個(gè)表示什么都不輸出尿扯，你也可以寫成其他的方式。比如說寫成log文件焰雕。
如果想關(guān)閉衷笋，就可以在瀏覽器的console中輸入debug(true)，就可以關(guān)閉log打印矩屁。反之則開啟辟宗。
console.log = function() {
//do what you want...
}
這里增加一些技巧。比如說如果想恢復(fù)之前的log方法吝秕，可以在更改之前將其保存在一個(gè)變量中：
//saving the original console.log function
var preservedConsoleLog = console.log;
當(dāng)然泊脐，任何方法都可以保存下來。
這里給出一個(gè)復(fù)寫全部方法的寫法：
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);
或者說烁峭，多開關(guān)控制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)關(guān)閉log容客；使用globalDebug(false,true)關(guān)閉所有console的輸出。
其他解決方案
debugout.js
其提供了比較強(qiáng)大的console log處理功能则剃。
Github地址為debugout.js耘柱，其有一個(gè)demo。
picolog.js
其也是封裝了console的功能棍现。但是增加了一個(gè)屬性（日志level）：
log.NONE; // 0
其表示调煎，不去打印所有的log。相當(dāng)于開關(guān)控制己肮。
Github地址為picolog.js士袄。
