Enable Disable Javascript Console Output easily for development and production

Web Developers use console to log debugging information from within the script primarily. Browser console is a great place and there are many available console methods to help a developer and also an end-user what's going on in the script. A developer can output simple log messages for debugging to console along with warning, error messages for the end-user so that they know what's going on.

However, the logs a developers generally write for debugging the script isn't always required for the end-user to see. The problem is write here. Possible solutions can be like,




  • Delete all lines of code for log before publishing the script for end-user
    • Problem is, the developer might need these logs in future.
  • Use a boolean flag check before each log line.
    • Problem is, more codes to write to update existing code and for new codes, more checks
Thus this will be really handy to have a way to enable-disable console outputs. That is enable when in development, disable when in production. Following are the goals
  • No need to update existing lines of codes for log output
  • No need to write additional code to output to console except what's default
  • Easily enable-disable output to console

ContentMiddleAd

Enable Disable Javascript Console Output:

Setup:

Add the following code to your script. Put it at the very beginning, so that you can use it from anywhere.


var clogger = {
 consoleMethods: ['log','error','warn','info'],
 consoleStoredMethods: {},
 initiated: false,
 init: function(){
  if(!this.initiated){
   for(var i=0; i<this.consoleMethods.length; i++){
    this.consoleStoredMethods[this.consoleMethods[i]] = window['console'][this.consoleMethods[i]];
    window['console'][this.consoleMethods[i]] = function(){};
    }
   this.initiated = true;
   } 
  },
 reset: function(){
  if(this.initiated){
   for(var i=0; i<this.consoleMethods.length; i++){
    window['console'][this.consoleMethods[i]] = this.consoleStoredMethods[this.consoleMethods[i]];
    }
   this.consoleStoredMethods = {};
   this.initiated = false;
   }
  },
 enableLoggingOn: function(logMethods){
  this.init();
  if(typeof logMethods === 'undefined') logMethods = null;
  if(logMethods && !(logMethods instanceof Array)) logMethods = [logMethods];
  methodsToEnable = logMethods ? logMethods : this.consoleMethods;
  for(var i=0;i<methodsToEnable.length; i++){
   var thsMethod = methodsToEnable[i];
   window['console'][thsMethod] = this.consoleStoredMethods[thsMethod];
   }
  },
 disableLoggingOn: function(logMethods){
  this.init();
  if(typeof logMethods === 'undefined') logMethods = null;
  if(logMethods && !(logMethods instanceof Array)) logMethods = [logMethods];
  methodsToDisable = logMethods ? logMethods : this.consoleMethods;
  for(var i=0;i<methodsToDisable.length; i++){
   var thsMethod = methodsToDisable[i];
   window['console'][thsMethod] = function(){};
   }
  }
 };

Methods:

1. clogger.init():

Call this method to initiate the logger. All console output methods are disabled by default when you call this method. 

2. clogger.enableLogging():

Call this method to enable output to console. You can also enable output through an specific console methods by sending the method name as string in the parameter as follows,

clogger.enableLogging('error');

You can also enable more than one console methods by sending their names in the parameter as an array as follows

clogger.enableLogging(['error', 'warn']);

Please be noted, if you haven't called the clogger.init() method prior to this method, the this method will automatically call the clogger.init() method

3. clogger.disableLogging():

Call this method to disable output to console. You can also disable output through an specific console methods by sending the method name as string in the parameter as follows,

clogger.disableLogging('log');

You can also disable more than one console methods by sending their names in the parameter as an array as follows

clogger.disableLogging(['log', 'info']);

Please be noted, if you haven't called the clogger.init() method prior to this method, the this method will automatically call the clogger.init() method

4. clogger.reset():

Call this method to reset any changes made by clogger. Basically it will enable all the console methods. However it will free up some memory.

Wait, why do I need all these?
Yes, you do not need to use this long script for a feature that can be implemented with just one line of code as follows

window['console']['log'] = function(){};


You can also disable other console methods the same way as above. Then why would you use my script?

ContentMiddleAd


Well, it depends a little. For example, I generally write a lot of logs in my script. It helps me understand my code when I am reading it and also when the code is executed, the logs in the console tells me the whole story. Now, this list of logs can be very long and may I need to see the output of just one process. Then I can disable output initially and enable it right before the process and again disable it at the end of the process. This will generate my desired output.

Again, I can turn disable individual console methods or enable specific console methods to see the output of those methods only among all the console methods I have used.

Moreover, this is more manageable.

Please note that, only 4 console methods are hard-coded in this script which are log, info, warn, error. You can update the script to use other console methods by editing the following properties

consoleMethods: ['log','error','warn','info'],


Happy coding!

Recommended

Comments

Contact Us

Author