我应该从生产代码中删除console.log吗?

104

我目前在我的代码中随处都有这个JS语句:

window.console && console.log("Foo");

我想知道这是否会带来高昂的代价,在生产环境中是否有任何负面影响。

我是否可以继续留下客户端日志记录,还是应该删除?

编辑:最终,我认为我(以及其他人)能提出的最好论据是,留下日志记录可能会在服务器和客户端之间传输非常大量的额外数据。如果要完全优化生产代码,则需要删除日志记录以减少发送到客户端的 JavaScript 大小。


1
https://dev59.com/lXNA5IYBdhLWcg3wC5NR - Zach Lysobey
13个回答

1

简述

想法:记录对象会导致它们无法进行垃圾回收。

细节

  1. 如果您将对象传递给console.log,则可以通过DevTools控制台引用这些对象。您可以通过记录对象、改变它并发现旧的消息反映了对象后来的更改来检查它。
  2. 如果日志太长,则Chrome中的旧消息确实会被删除。
  3. 如果日志很短,则旧消息不会被删除,如果这些消息引用对象,则这些对象不会被垃圾回收。

这只是一个想法:我检查了1和2点,但没有检查第3点。

解决方案

如果您想为客户端故障排除或其他需要保留日志,则:

['log', 'warn', 'error'].forEach( (meth) => {
  const _meth = window.console[meth].bind(console);
  window.console[meth] = function(...args) { _meth(...args.map((arg) => '' + arg)) }
});

0

我基本上用具有代码运行位置知识的函数覆盖了console.log函数。因此,我可以像往常一样继续使用console.log。它自动知道我是在开发/质量保证模式还是在生产模式下。也有一种方法可以强制它。

这里是一个工作的fiddle。 http://jsfiddle.net/bsurela/Zneek/

由于人们发布jsfiddle,这里是堆栈溢出的片段。

  log:function(obj)
{
    if(window.location.hostname === domainName)
    {
        if(window.myLogger.force === true)
        {
            window.myLogger.original.apply(this,arguments);
        }
    }else {
        window.myLogger.original.apply(this,arguments);
    }
},

0

我知道这是一个相当老的问题,而且已经有一段时间没有太多活动了。我只是想添加我的解决方案,它似乎对我来说非常有效。

    /**
     * Logger For Console Logging 
     */
    Global.loggingEnabled = true;
    Global.logMode = 'all';
    Global.log = (mode, string) => {    
        if(Global.loggingEnabled){
            switch(mode){
              case 'debug':
                  if(Global.logMode == 'debug' || Global.logMode == 'all'){
                    console.log('Debug: '+JSON.stringify(string));
                  }
                  break;
              case 'error':
                  if(Global.logMode == 'error' || Global.logMode == 'all'){
                    console.log('Error: '+JSON.stringify(string));
                  }       
                  break;
              case 'info':
                  if(Global.logMode == 'info' || Global.logMode == 'all'){
                    console.log('Info: '+JSON.stringify(string));
                  }
                  break;
            }
        }
    }

通常我会在我的脚本中创建一个函数,就像这样,或者你可以将它放在全局脚本中:
Something.fail = (message_string, data, error_type, function_name, line_number) => {
    try{

        if(error_type == undefined){
            error_type = 'error';
        }

        Global.showErrorMessage(message_string, true);
        Global.spinner(100, false);

        Global.log(error_type, function_name);
        Global.log(error_type, 'Line: '+line_number);
        Global.log(error_type, 'Error: '+data);

    }catch(error){
        if(is_global){
            Global.spinner(100, false);
            Global.log('error', 'Error: '+error);
            Global.log('error', 'Undefined Error...');
        }else{
            console.log('Error:'+error);
            console.log('Global Not Loaded!');
        }           
    }   
}

然后我就像这样使用它,而不是console.log:

try{
 // To Do Somehting
 Something.fail('Debug Something', data, 'debug', 'myFunc()', new Error().lineNumber);
}catch(error){
 Something.fail('Something Failed', error, 'error', 'myFunc()', new Error().lineNumber);
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接