Should I be removing console.log from production c

Question

I currently have this JS statement everywhere in my code:

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

I am wondering if this is costly at all, or has any negative side-effects in production.

Am I free to leave client-side logging in, or should it go?

EDIT: In the end, I suppose the best argument I (and anyone else?) can come up with is that there is a possibly non-negligible amount of extra data transferred between the server and the client by leaving logging messages left in. If production code is to be fully optimized, logging will have to be removed to reduce the size of javascript being sent to the client.

Answer 1

You should not add development tools to a production page.

To answer the other question: The code cannot have a negative side-effect:

• window.console will evaluate to false if console is not defined
• console.log("Foo") will print the message to the console when it's defined (provided that the page does not overwrite console.log by a non-function).

Answer 2

If minification is part of your build process, you may use it to strip out debug code, as explained here with Google closure compiler: Exclude debug JavaScript code during minification

if (DEBUG) {
  console.log("Won't be logged if compiled with --define='DEBUG=false'")
}

If you compile with advanced optimizations, this code will even be identified as dead and removed entirely

Answer 3

TL;DR

Idea: Logging objects precludes them from being Garbage Collected.

Details

1. If you pass objects to console.log then these objects are accessible by reference from console of DevTools. You may check it by logging object, mutating it and finding that old messages reflect later changes of the object.
2. If logs are too long old messages do get deleted in Chrome.
3. If logs are short then old messages are not removed, if these messages reference objects then these objects are not Garbage Collected.

It's just an idea: I checked points 1 and 2 but not 3.

Solution

If you want to keep logs for sake of client-side troubleshooting or other needs then:

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

Answer 4

I basically overwrite the console.log function with the one what has knowledge of where the code is being run. Thus i can keep using console.log as I do always. It automatically knows that I am in dev/qa mode or in production. There is also a way to force it. Here is a working fiddle. http://jsfiddle.net/bsurela/Zneek/

Here is the snippet as stack overflow is intimated by people posting 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);
    }
},

Answer 5

var AppLogger = (function () {
  var debug = false;
  var AppLogger = function (isDebug) {
    debug = isDebug;
  }
  AppLogger.conlog = function (data) {
    if (window.console && debug) {
        console.log(data);
    }
  }
  AppLogger.prototype = {
    conlog: function (data) {
        if (window.console && debug) {
            console.log(data);
        }
    }
  };
return AppLogger;
})();

Usage:

var debugMode=true;
var appLogger = new AppLogger(debugMode);
appLogger.conlog('test');

Answer 6

Another way of dealing with this is to 'stub' out the console object when it isn't defined so no errors are thrown in contexts that do not have the console i.e.

if (!window.console) {
  var noOp = function(){}; // no-op function
  console = {
    log: noOp,
    warn: noOp,
    error: noOp
  }
}

you get the idea... there are a lot of functions defined on the various implementations of the console, so you could stub them all or just the ones you use (e.g. if you only ever use console.log and never used console.profile, console.time etc...)

This for me is a better alternative in development than adding conditionals in front of every call, or not using them.

see also: Is it a bad idea to leave "console.log()" calls in your producton JavaScript code?