Debugging JavaScript Using Firebug’s Console Logger

Thanks to Firebug, debugging JavaScript has never been easier. Firebug is an add-on to the FireFox browser. It has many wonderful features. One of my favorite is the console logger. This is where you can call the function console.log() in your code to write log messages to the Firebug console. This is definitely much better than using the alert() function. It’s unobtrusive and transparent to the execution of your JavaScript program.

Below is a sample HTML page with JavaScript code demonstrating how to use this function.

<html>
  <head>
    <script type="text/javascript">
    function demo() {
        // do something          
        console.log("I'm here!");
        // do something          
    }
    </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 button element that will print out the message “I’m here!” to the Firebug console.

Graceful Degradation

Of course, console.log() only works with the Firefox browser, with Firebug installed, and the console is enabled. Otherwise, you’ll get an error saying the console object is not defined.

For browsers other than Firefox or if Firebug is not installed, you can still retain the console.log() calls in your code and avoid getting any error messages by redirecting this call to a no-operation. To do this, create a console object and an implementation of the log() method that does not do anything. Below is a sample implementation.

// if console is not defined, e.g., Firebug console is not enabled or Non-Firefox browser
if (typeof console == 'undefined') {
    var console = {};
    console.log = function(msg) {
        return;
    };
}

The code above shows that if the console object is not defined, like when using a browser other than FireFox, a console object will be created together with a method named log() that does not do anything. That console object will then be the one that will be used by your log() calls in non-Firefox browser or when Firebug console is not enabled, which will just fail silently.

The console.log() method also supports formatted messages similar to C or Perl’s printf function. For example:

console.log("This is loop %s", loop_counter);

Firebug’s console object is not limited to the log() method. It can do other cool things. You can learn more about them here – http://getfirebug.com/console.html

Many sites have discussed this topic with great examples and illustrations. Here’s a nice one – http://ajax.phpmagazine.net/2006/05/firebug_the_future_of_javascri.html.

Note: The solution presented here is not without problems. See my other post for details.
Alvin Abad

Advertisements

2 thoughts on “Debugging JavaScript Using Firebug’s Console Logger

  1. Pingback: Firebug’s console object cannot be overridden « Alvin Abad Boldly Going Nowhere

  2. Pingback: A Nimbits Gadget: Programmer’s Show And Tell | GigaMegaBlog

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