是否有任何方法关闭我的JavaScript代码中的所有console.log语句,用于测试目的?
当前回答
嘿~让我们用现代的2022方式来做~
ES6中引入了代理和反射。这些是我们正在寻找的工具,使console.log被条件“禁用”。
在传统的方法中,你必须创建另一个函数,像这样:
let console_disabled = true;
function console_log() {
if (!console_disabled) {
console.log.apply(console, arguments); //Dev Tools will mark the coding line here
}
}
但是,这将创建另一个函数,并且您无法使用Dev Tools中显示的编码行记录消息。
这就是2022年之路。
// Disable Console Log without altering debug coding line. // No override original `console` object let console_disabled = false; const nullFunc = function(){}; const _console = new Proxy(console, { get(target, prop, receiver){ if(prop==='log' && console_disabled){ return nullFunc; } return Reflect.get(...arguments) } }); console_disabled = true; _console.log('you cannot see me'); console_disabled = false; _console.log('you can see me @ line 18'); console_disabled = true; _console.log('you cannot see me'); console_disabled = false; _console.log('you can see me @ line 22');
您还可以重写原来的控制台对象。
// Disable Console Log without altering debug coding line. // Override original `console` object let console_disabled = false; const nullFunc = function(){}; console = new Proxy(console, { get(target, prop, receiver){ if(prop==='log' && console_disabled){ return nullFunc; } return Reflect.get(...arguments) } }); console_disabled = true; console.log('you cannot see me'); console_disabled = false; console.log('you can see me @ line 18'); console_disabled = true; console.log('you cannot see me'); console_disabled = false; console.log('you can see me @ line 22');
有关代理和反射的详细信息, 请访问https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
其他回答
我这样写道:
//Make a copy of the old console.
var oldConsole = Object.assign({}, console);
//This function redefine the caller with the original one. (well, at least i expect this to work in chrome, not tested in others)
function setEnabled(bool) {
if (bool) {
//Rewrites the disable function with the original one.
console[this.name] = oldConsole[this.name];
//Make sure the setEnable will be callable from original one.
console[this.name].setEnabled = setEnabled;
} else {
//Rewrites the original.
var fn = function () {/*function disabled, to enable call console.fn.setEnabled(true)*/};
//Defines the name, to remember.
Object.defineProperty(fn, "name", {value: this.name});
//replace the original with the empty one.
console[this.name] = fn;
//set the enable function
console[this.name].setEnabled = setEnabled
}
}
不幸的是,它在使用严格模式下不起作用。
使用console。fn。setEnabled = setEnabled然后是console。fn。setEnabled(false) fn可以是几乎任何控制台函数。 你的情况是:
console.log.setEnabled = setEnabled;
console.log.setEnabled(false);
我还写了这个:
var FLAGS = {};
FLAGS.DEBUG = true;
FLAGS.INFO = false;
FLAGS.LOG = false;
//Adding dir, table, or other would put the setEnabled on the respective console functions.
function makeThemSwitchable(opt) {
var keysArr = Object.keys(opt);
//its better use this type of for.
for (var x = 0; x < keysArr.length; x++) {
var key = keysArr[x];
var lowerKey = key.toLowerCase();
//Only if the key exists
if (console[lowerKey]) {
//define the function
console[lowerKey].setEnabled = setEnabled;
//Make it enabled/disabled by key.
console[lowerKey].setEnabled(opt[key]);
}
}
}
//Put the set enabled function on the original console using the defined flags and set them.
makeThemSwitchable(FLAGS);
所以你只需要在FLAGS中加入默认值(在执行上面的代码之前),比如FLAGS. log = false,日志功能将在默认情况下被禁用,仍然可以调用console.log.setEnabled(true)来启用它
令我惊讶的是,在所有这些答案中,没有人把它们结合起来:
没有jquery 匿名函数不污染全局命名空间 窗口的句柄情况。控制台未定义 只需修改控制台的.log函数
我会选这个:
(function () {
var debug = false
if (debug === false) {
if ( typeof(window.console) === 'undefined') { window.console = {}; }
window.console.log = function () {};
}
})()
console.log('pre');
/* pre content */
// define a new console
let preconsole = Object.assign({}, window.console);
let aftconsole = Object.assign({}, window.console, {
log: function(text){
preconsole.log(text);
preconsole.log('log');
}
});
console = aftconsole;
/* content */
console.log('content');
/* end of content */
console = preconsole;
console.log('aft');
当使用React时,你可以利用钩子来管理它,这样它就被限制在你的组件范围内
import { useEffect, useRef } from "react";
type LoggingReplacements = {
debug?: typeof console["debug"];
error?: typeof console["error"];
info?: typeof console["info"];
log?: typeof console["log"];
warn?: typeof console["warn"];
};
/**
* This replaces console.XXX loggers with custom implementations. It will restore console log on unmount of the component.
* @param replacements a map of replacement loggers. They're all optional and only the functions defined will be replaced.
*/
export function useReplaceLogging({
debug,
error,
info,
log,
warn,
}: LoggingReplacements): void {
const originalConsoleDebug = useRef(console.debug);
const originalConsoleError = useRef(console.error);
const originalConsoleInfo = useRef(console.info);
const originalConsoleLog = useRef(console.log);
const originalConsoleWarn = useRef(console.warn);
if (debug) {
console.debug = debug;
}
if (error) {
console.error = error;
}
if (info) {
console.info = info;
}
if (log) {
console.log = log;
}
if (warn) {
console.warn = warn;
}
useEffect(() => {
return function restoreConsoleLog() {
console.debug = originalConsoleDebug.current;
console.error = originalConsoleError.current;
console.info = originalConsoleInfo.current;
console.log = originalConsoleLog.current;
console.warn = originalConsoleWarn.current;
};
}, []);
}
在https://github.com/trajano/react-hooks/tree/master/src/useReplaceLogging上编写测试代码
https://stackoverflow.com/a/46189791/871166的简化
switch (process.env.LOG_LEVEL) {
case 'ERROR':
console.warn = function() {};
case 'WARN':
console.info = function() {};
case 'INFO':
console.log = function() {};
case 'LOG':
console.debug = function() {};
console.dir = function() {};
}