我写了一个ES2015解决方案(仅用于Webpack)。

class logger {
  static isEnabled = true;

  static enable () {
    if(this.constructor.isEnabled === true){ return; }

    this.constructor.isEnabled = true;
  }

  static disable () {
    if(this.constructor.isEnabled === false){ return; }

    this.constructor.isEnabled = false;
  }

  static log () {
    if(this.constructor.isEnabled === false ) { return; }

    const copy = [].slice.call(arguments);

    window['console']['log'].apply(this, copy);
  }

  static warn () {
    if(this.constructor.isEnabled === false ) { return; }

    const copy = [].slice.call(arguments);

    window['console']['warn'].apply(this, copy);
  }

  static error () {
    if(this.constructor.isEnabled === false ) { return; }

    const copy = [].slice.call(arguments);

    window['console']['error'].apply(this, copy);
  }
}

描述:

Along with logger.enable and logger.disable you can use console.['log','warn','error'] methods as well using logger class. By using logger class for displaying, enabling or disabling messages makes the code much cleaner and maintainable. The code below shows you how to use the logger class: logger.disable() - disable all console messages logger.enable() - enable all console messages logger.log('message1', 'message2') - works exactly like console.log. logger.warn('message1', 'message2') - works exactly like console.warn. logger.error('message1', 'message2') - works exactly like console.error. Happy coding..

这就是我的方法。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添加了一个保护，而不是猴子补丁。它是安全的。

并且你可以安全地移除所有的控制台。使用该插件登录生产，或者使用与上面相同的配置保留您想要的插件。

如果你使用IE7，控制台将不会被定义。所以一个更IE友好的版本是:

if (typeof console == "undefined" || typeof console.log == "undefined") 
{
   var console = { log: function() {} }; 
}

我认为2020年最简单、最容易理解的方法是创建一个像log()这样的全局函数，你可以选择以下方法之一:

const debugging = true;

function log(toLog) {
  if (debugging) {
    console.log(toLog);
  }
}

function log(toLog) {
  if (true) { // You could manually change it (Annoying, though)
    console.log(toLog);
  }
}

你可以说这些功能的缺点是:

您仍然在运行时调用函数 您必须记住在第二个选项中更改调试变量或if语句 您需要确保在加载所有其他文件之前加载了该函数

And my retorts to these statements is that this is the only method that won't completely remove the console or console.log function which I think is bad programming because other developers who are working on the website would have to realize that you ignorantly removed them. Also, you can't edit JavaScript source code in JavaScript, so if you really want something to just wipe all of those from the code you could use a minifier that minifies your code and removes all console.logs. Now, the choice is yours, what will you do?

下面是更详细的:

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://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() {};
}