Best practice for removing console.log and other debug code from your release JavaScript?

Question

I've seen some of the console wrappers that stop errors in browser with a console and more advanced ones that enable logging in older browsers. But none that I've seen help switch on and off the debug code.

At the moment I do a find and replace to comment out debug code. There must be a better way?

I'm using Combres which uses YUI to minify the JavaScript. I've seen some posts that mention using double semi colons to mark lines to be removed in the minification process. Is this a hack or good practice?

Answer 1

Use Y.log() instead, and then you can use gallery-log-filter to filter the log messages that you want to see printed.

Answer 2

Probably you should have your own wrapper around console.log() and log your debug info via that wrapper. That way you can replace that single function with an empty function once you deploy to production so the console won't flood with debugging info. You can also replace the actual console.log function with an empty function, but that would prevent any Javascript from outputting to console, not just yours.

Answer 3

If you look at how the YUI Framework does it, they actually use a regex and generate 3 files from source. One that has the logging -debug, one that has the logging stripped out, just the file name, and a minified version with no logging. Then you can set a global config to say which version you want. I've worked that way in the past and works nicely.

Answer 4

Define your own debugging function that'd be wrapper around console.log or anything else you want and make sure that minifier can easily deduce that it is no-op if you make it empty. After that, once you comment function body out, most minifiers should detect that there's nothing to call or inline and remove references to your function completely.

Here's the example:

(function() {
   function debug() {
      console.log(arguments)
   }

   function main() {
      debug(123)
      alert("This is production code!")
      debug(456)
   }

   main()
})()

I've put it into anonymous function to restrict scope of debug and don't let it be assigned to window - that allows minifier to easily decide if it is necessary or not. When I paste this code to online GCC, I get:

(function(){function a(){console.log(arguments)}a(123);alert("This is production code!");a(456)})();

But once I add // before console.log to make debug empty, GCC compiles it to:

(function(){alert("This is production code!")})();

...removing all traces of debug code completely!