是否有任何方法关闭我的JavaScript代码中的所有console.log语句,用于测试目的?
当前回答
在其他答案的基础上,我个人希望只关闭代码的特定部分(ES6模块,但简单的单独脚本也可以)。
// old console to restore functionality
const consoleHolder = window.console;
// arbitrary strings, for which the console stays on (files which you aim to debug)
const debuggedHandlers = ["someScript", "anotherScript"];
// get console methods and create a dummy with all of them empty
const consoleMethodKeys = Object.getOwnPropertyNames(window.console).filter(item => typeof window.console[item] === 'function');
const consoleDummy = {};
consoleMethodKeys.forEach(method => consoleDummy[method] = () => {});
export function enableConsoleRedirect(handler) {
if (!debuggedHandlers.includes(handler)) {
window.console = consoleDummy;
}
}
export function disableConsoleRedirect() {
window.console = consoleHolder;
}
然后,只需将这个模块导入到您希望能够切换调试模式的任何文件中,在文件顶部调用enable函数,在底部调用disable函数。
如果希望在简单脚本中使用它,可能需要将顶部包装在匿名函数中和/或稍微重新组织它,以最大限度地减少名称空间污染。
此外,你可能想要只使用true/false而不是字符串处理程序,并在当前使用的文件中切换调试模式。
其他回答
这是我刚刚研究的一个相当详尽的解决方案。我介绍了https://developer.mozilla.org/en-US/docs/Web/API/console中所有完全支持的控制台方法
1. 创建js文件“logger.js”,并将以下代码放入其中
logger = {
assert: function() {
if(logger.active && logger.doAssert) {
console.assert.apply(null,arguments);
}
},
clear: function() {
if(logger.active && logger.doClear) {
console.clear();
}
},
count: function() {
if(logger.active && logger.doCount) {
console.count.apply(null,arguments);
}
},
countReset: function() {
if(logger.active && logger.doCountReset) {
console.countReset.apply(null,arguments);
}
},
debug: function() {
if(logger.active && logger.doDebug) {
console.debug.apply(null,arguments);
}
},
dir: function() {
if(logger.active && logger.doDir) {
console.dir.apply(null,arguments);
}
},
dirxml: function() {
if(logger.active && logger.doDirxml) {
console.dirxml.apply(null,arguments);
}
},
error: function() {
if(logger.active && logger.doError) {
console.error.apply(null,arguments);
}
},
group: function() {
if(logger.active && logger.doGroup) {
console.group.apply(null,arguments);
}
},
groupCollapsed: function() {
if(logger.active && logger.doGroup) {
console.groupCollapsed.apply(null,arguments);
}
},
groupEnd: function() {
if(logger.active && logger.doGroup) {
console.groupEnd.apply(null,arguments);
}
},
info: function() {
if(logger.active && logger.doInfo) {
console.info.apply(null,arguments);
}
},
log: function() {
if(logger.active && logger.doLog) {
console.log.apply(null,arguments);
}
},
table: function() {
if(logger.active && logger.doTable) {
console.table.apply(null,arguments);
}
},
time: function() {
if(logger.active && logger.doTime) {
console.time.apply(null,arguments);
}
},
timeEnd: function() {
if(logger.active && logger.doTime) {
console.timeEnd.apply(null,arguments);
}
},
timeLog: function() {
if(logger.active && logger.doTime) {
console.timeLog.apply(null,arguments);
}
},
trace: function() {
if(logger.active && logger.doTrace) {
console.trace.apply(null,arguments);
}
},
warn: function() {
if(logger.active && logger.doWarn) {
console.warn.apply(null,arguments);
}
},
active: true,
doAssert: true,
doClear: true,
doCount: true,
doCountReset: true,
doDebug: true,
doDir: true,
doDirxml: true,
doError: true,
doGroup: true,
doInfo: true,
doLog: true,
doTable: true,
doTime: true,
doTrace: true,
doWarn: true
};
2. 在所有脚本之前,在所有页面中都包含日志
3.将脚本中的所有“console.”替换为“logger.”
4. 使用
就像"console "一样,但是和"logger "连用
logger.clear();
logger.log("abc");
最后禁用部分或全部日志
//disable/enable all logs
logger.active = false; //disable
logger.active = true; //enable
//disable some logs
logger.doLog = false; //disable
logger.doInfo = false; //disable
logger.doLog = true; //enable
logger.doInfo = true; //enable
logger.doClear = false; //log clearing code will no longer clear the console.
EDIT
在我最近的项目中使用我的解决方案一段时间后,我意识到很难记住我应该使用logger。而不是主机。所以出于这个原因,我决定重写控制台。这是我的最新解决方案:
const consoleSubstitute = console;
console = {
assert: function() {
if(console.active && console.doAssert) {
consoleSubstitute.assert.apply(null,arguments);
}
},
clear: function() {
if(console.active && console.doClear) {
consoleSubstitute.clear();
}
},
count: function() {
if(console.active && console.doCount) {
consoleSubstitute.count.apply(null,arguments);
}
},
countReset: function() {
if(console.active && console.doCountReset) {
consoleSubstitute.countReset.apply(null,arguments);
}
},
debug: function() {
if(console.active && console.doDebug) {
consoleSubstitute.debug.apply(null,arguments);
}
},
dir: function() {
if(console.active && console.doDir) {
consoleSubstitute.dir.apply(null,arguments);
}
},
dirxml: function() {
if(console.active && console.doDirxml) {
consoleSubstitute.dirxml.apply(null,arguments);
}
},
error: function() {
if(console.active && console.doError) {
consoleSubstitute.error.apply(null,arguments);
}
},
group: function() {
if(console.active && console.doGroup) {
consoleSubstitute.group.apply(null,arguments);
}
},
groupCollapsed: function() {
if(console.active && console.doGroup) {
consoleSubstitute.groupCollapsed.apply(null,arguments);
}
},
groupEnd: function() {
if(console.active && console.doGroup) {
consoleSubstitute.groupEnd.apply(null,arguments);
}
},
info: function() {
if(console.active && console.doInfo) {
consoleSubstitute.info.apply(null,arguments);
}
},
log: function() {
if(console.active && console.doLog) {
if(console.doLogTrace) {
console.groupCollapsed(arguments);
consoleSubstitute.trace.apply(null,arguments);
console.groupEnd();
} else {
consoleSubstitute.log.apply(null,arguments);
}
}
},
table: function() {
if(console.active && console.doTable) {
consoleSubstitute.table.apply(null,arguments);
}
},
time: function() {
if(console.active && console.doTime) {
consoleSubstitute.time.apply(null,arguments);
}
},
timeEnd: function() {
if(console.active && console.doTime) {
consoleSubstitute.timeEnd.apply(null,arguments);
}
},
timeLog: function() {
if(console.active && console.doTime) {
consoleSubstitute.timeLog.apply(null,arguments);
}
},
trace: function() {
if(console.active && console.doTrace) {
consoleSubstitute.trace.apply(null,arguments);
}
},
warn: function() {
if(console.active && console.doWarn) {
consoleSubstitute.warn.apply(null,arguments);
}
},
active: true,
doAssert: true,
doClear: true,
doCount: true,
doCountReset: true,
doDebug: true,
doDir: true,
doDirxml: true,
doError: true,
doGroup: true,
doInfo: true,
doLog: true,
doLogTrace: false,
doTable: true,
doTime: true,
doTrace: true,
doWarn: true
};
现在你可以使用控制台。像往常一样。
如果你使用Grunt,你可以添加一个任务来删除/注释console.log语句。因此console.log不再被调用。
https://www.npmjs.org/package/grunt-remove-logging-calls
下面是更详细的:
var DEBUG = false;
if(!DEBUG){
if(!window.console) window.console = {};
var methods = ["log", "debug", "warn", "info"];
for(var i=0;i<methods.length;i++){
console[methods[i]] = function(){};
}
}
这将把控制台中存在的通用方法归零,并且可以毫无错误地调用它们,而且几乎没有性能开销。在像IE6这样没有控制台的浏览器的情况下,将创建虚拟方法以防止错误。当然,Firebug中还有更多的函数,比如跟踪、配置文件、时间等。如果在代码中使用它们,则可以将它们添加到列表中。
你也可以检查调试器是否有这些特殊的方法(ie, ie),并将不支持的方法归零:
if(window.console && !console.dir){
var methods = ["dir", "dirxml", "trace", "profile"]; //etc etc
for(var i=0;i<methods.length;i++){
console[methods[i]] = function(){};
}
}
这就是我的方法。https://github.com/jchnxu/guard-with-debug 免责声明:我是这个小实用程序的作者
localStorage.debug = [
'enable/console/log/in/this/file.ts',
'enable/console/log/in/this/folder/*',
'-disable/console/log/in/this/file.ts',
'-disable/console/log/in/this/folder/*',
// enable all
'*',
].join(',');
这种方法的好处是我们可以基于文件名启用/禁用,在以下情况下尤其有用
跨多个复杂模块调试 输出内容很大,在视觉上令人不安 通过触摸代码库快速打开/关闭日志记录,当您只是部署到有更多日志的生产环境时,这会更安全。
为什么要触摸console.log?危险吗?
这多少有点自以为是。我发现自己写了很多主机游戏。而不是更标准的方式从'xxx' && logger.info(…)导入记录器。我想原因是console.log是js原生的,它感觉更自然。
这个插件只是给console.log添加了一个保护,而不是猴子补丁。它是安全的。
并且你可以安全地移除所有的控制台。使用该插件登录生产,或者使用与上面相同的配置保留您想要的插件。
这是来自SolutionYogi和Chris s的答案的混合。它维护console.log行号和文件名。jsFiddle示例。
// Avoid global functions via a self calling anonymous one (uses jQuery)
(function(MYAPP, $, undefined) {
// Prevent errors in browsers without console.log
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function(){};
//Private var
var console_log = console.log;
//Public methods
MYAPP.enableLog = function enableLogger() { console.log = console_log; };
MYAPP.disableLog = function disableLogger() { console.log = function() {}; };
}(window.MYAPP = window.MYAPP || {}, jQuery));
// Example Usage:
$(function() {
MYAPP.disableLog();
console.log('this should not show');
MYAPP.enableLog();
console.log('This will show');
});
推荐文章
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- 如何在Visual c++中保持控制台窗口打开?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?