我写了一个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..

我之前用过温斯顿记录器。

现在，我使用以下简单的代码从经验:

从cmd/命令行设置环境变量(在Windows上): cmd setx LOG_LEVEL信息

或者，如果你愿意，你可以在你的代码中有一个变量，但上面更好。

Restart cmd/ command line, or, IDE/ editor like Netbeans Have below like code: console.debug = console.log; // define debug function console.silly = console.log; // define silly function switch (process.env.LOG_LEVEL) { case 'debug': case 'silly': // print everything break; case 'dir': case 'log': console.debug = function () {}; console.silly = function () {}; break; case 'info': console.debug = function () {}; console.silly = function () {}; console.dir = function () {}; console.log = function () {}; break; case 'trace': // similar to error, both may print stack trace/ frames case 'warn': // since warn() function is an alias for error() case 'error': console.debug = function () {}; console.silly = function () {}; console.dir = function () {}; console.log = function () {}; console.info = function () {}; break; } Now use all console.* as below: console.error(' this is a error message '); // will print console.warn(' this is a warn message '); // will print console.trace(' this is a trace message '); // will print console.info(' this is a info message '); // will print, LOG_LEVEL is set to this console.log(' this is a log message '); // will NOT print console.dir(' this is a dir message '); // will NOT print console.silly(' this is a silly message '); // will NOT print console.debug(' this is a debug message '); // will NOT print

现在，根据点1中的LOG_LEVEL设置(例如，setx LOG_LEVEL日志和重新启动命令行)，上面的一些将打印，其他将不打印

希望这有帮助。

我一直在用以下方法来处理这个问题:-

var debug = 1;
var logger = function(a,b){ if ( debug == 1 ) console.log(a, b || "");};

将debug设置为1以启用调试。然后在输出调试文本时使用记录器函数。它还设置为接受两个参数。

所以，与其

console.log("my","log");

use

logger("my","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

如果你使用Webpack，你可以使用Terser插件来完全排除console.log函数调用。

这样你就可以有一个干净的生产应用程序包，它不会暴露不必要的信息，但在调试版本中仍然有所有这些信息。

https://github.com/terser/terser#compress-options

drop_console(默认值:false)——传递true以丢弃对控制台的调用。*功能。如果你希望删除一个特定的函数调用，如console.info和/或在删除函数调用后保留函数参数的副作用，则使用pure_funcs代替。

minimizer: [
    new TerserPlugin({
        terserOptions: {
            compress: {
                pure_funcs: [ 'console.log' ]
            }
        }
    }),
]

或者你也可以使用drop_console: true来排除所有控制台调用。

如果你正在使用gulp，那么你可以使用这个插件:

使用下面的命令安装这个插件: NPM安装gulp-remove-logging 接下来，将这一行添加到gulpfile中: Var gulp_remove_logging = require("gulp-remove-logging"); 最后，将配置设置(见下文)添加到gulpfile中。 任务配置 饮而尽。任务("remove_logging"，函数(){ 返回gulp.src (" src / javascript / * * / * . js”) .pipe ( gulp_remove_logging () ） .pipe ( gulp.dest ( “构建/ javascript /” ） ）; })；