When Firebug’s Console Object Cannot be Overridden

In my previous blog post, I’ve shown how to use Firebug’s console object to log debug messages. I’ve also shown how to perform graceful degradation if the console object is not available like when using a non-Firefox browser or if Firebug’s console is not enabled. This way, one can still retain the calls to console.log() without generating any error messages. However, there were still some issues I failed to address.

Production deployment

Normally, when you deploy code into production, you don’t want your debug calls to be included. You don’t want users to be getting those debug messages. There are two ways to fix this problem: 1) Add a step to your deployment process to search and remove all the debug calls in your code; or 2) Add some kind of a switch, say a global variable DEBUG, to decide whether to use Firebug’s console logger or redirect the call to a dummy console.log() that will not do anything. This functionality is similar to loggers like log4j in Java where you can set different settings (info, debug, etc.) to control logging without modifying the code.

Let’s say we wanted #2 above. The code below illustrates how this can be done.

    if (!window.DEBUG || typeof(console) == 'undefined') {
        console = {};
        console.log = function(msg) {
            return false;
        };
    }

If DEBUG is off (false), e.g., production, it will create the console object and implement a no-operation log() method. If the browser is Firefox, this will effectively override its console object, therefore, …

Wait, that is not correct. As of this writing (Firebug-v1.3.3), Firebug’s console object cannot be overridden! If you attempt to do so, you will get an error message of something like, “setting a property that has only a getter.”

Programming to an Interface and not an implementation

To fix this problem, what we should do instead is not use the Firebug console object directly to log messages. This is like the design pattern where one programs to an Interface and not an implementation.

Following this principle, we create our own implementation of the console object, let’s say mylogger. With this object, we can then control if we want to use Firebug’s console.log() or the dummy one depending on our DEBUG setting. Below is the modified version of the HTML page using mylogger.log().

<html>
  <head>
    <script type="text/javascript">
        DEBUG = true;

        // by default, set mylogger to do nothing
        mylogger = {};
        mylogger.log = function(msg) {
            return false;
        };

        // if DEBUG is true and Firebug console is available, use it for logging
        if (window.DEBUG && typeof(console) !== 'undefined') {
            mylogger = console;
	}
	    	    
        function demo() {
            // I did lots of things here          
            mylogger.log("I'm here!");
            // and a lot more          
        }
    </script>
  </head>
<body>
  <h1>Firebug's console.log() Demo</h1>
  <button onclick="demo();">Firebug console.log() demo</button>
</body>
</html>

The code above has a DEBUG switch that we set on the server side to true or false depending if we want to log messages or not. Instead of using the console.log() method directly in the demo() function, we use mylogger.log(). Since we cannot override Firebug’s console object, what we can do instead is make the decision whether to use it or not at runtime.

Advertisements

3 thoughts on “When Firebug’s Console Object Cannot be Overridden

  1. Pingback: Debugging JavaScript using Firebug’s Console Logger « Alvin Abad Boldly Going Nowhere

  2. I had to update your script as below because otherwise I was getting a fatal error in my page.

    // if DEBUG is true and Firebug console is available, use it for logging
    if (window.DEBUG && typeof(console) !== “undefined”) {
    mylogger = console;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s