About

My name is Rob Cherny and I'm a professional Web Developer with 16 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Learn More

Close Tab

Web Development

Debugging JavaScript with Firebug for Firefox & IE

So this week I was working on some fairly complex JavaScript mith multiple loops and object references in arrays and so forth. On top of that, the iterations were fired off by various events, so it was sort of complicated to keep track of all the references at any given time and what they were pointed at.

For years, the typical way to keep track of things has been using JavaScript alert() prompts, but that’s a very intrusive way to watch variables and confirm that you’ve reached spots in your code.

Introducing Firebug

Joe Hewitt, a Mozilla contributer, Firefox co-creator (and ex-Netscaper) built and released the excellent Firebug extension for Firefox which has built in document inspection support, and most importantly, a JavaScript command line console you can interact with or log evaluated expressions to. It’s pretty cool, you can also watch XMLHTTPRequests, their headers and responses, so for debugging Ajax you can’t beat it.

Firebug uses a window.console object, and unfortunately it blows up in Internet Explorer. From what I understand there’s some sort of support in Safari and I’ve even read that the maybe the Yahoo! Developer Network Logger tool may use it some how. But I haven’t used either, so I don’t know. I work on a PC, and test on Safari when I need to — fortunately it typically “just works”.

Bottom line, you can echo things out to the command line by doing the following at step points in your code:

It’s very powerful with string formatting commands and many other features including logging levels, assertions and timers. I’ve really only become obsessed with simply using it as a basic, rudimentary replacement for alert(). But you can do lots more with it.

I’m already expecting to use more, especially having found the excellent example reference here, which is great.

What about Internet Explorer? Introducing FB

Well, it doesn’t support window.console, but I figured you can fake it, right? Why not check for the existance of the object and do something else? I started simple here by simply appending a scrolling div element to the body, after all the page content. I set a few style attributes so that it can hopefully be seen regardless of what type of design you're working with. I guess they could be options, but you could hack the script. Maybe I can make them properties to be passed in the next version.

So, I created a FB object which abstracts window.console into an object literal with a FB.log() method. It doesn’t support even close to the full feature set, and might even be considered a bastardized version, because if you feed it the formatted objects and such, I don’t even know what it’ll do.

I had basic needs, but might expand it at some point. I just like being able to echo the values of things out to the screen, sometimes with messages and so forth. So I set it up so you can pass strings and variables/objects to the FB.log() method in an array.

I also set it up so that you can turn off individual messages, or globally shut off the whole thing. There you go.

I set up a demo screen for the Firebug / IE debugging console.

FB.log() Method

FB.log(boolean, array, boolean)

First argument, is a true or false to show that logging event. If you set it to false, the logging event will be safely ignored.

Second argument, the array, is an array of values, expressions, and/or objects which will be concatenated by a join() and output to the logging screen.

Third argument, really only supported in Firefox, enables the console.trace() feature of Firebug. I left it in there because I was using it at one point.

FB.o (Globally Stop Logging)

Basically, if anywhere you set the “o” (for “output”) property to false, it shuts it off, allowing you to optionally leave your debugging code in place and enable it later, perhaps for a staging server, etc.

This will disable the logging anywhere, including in Firebug.

Example Usage

Here’s a example of possible expressions:

Here we’re outputting language like “loop one index 0 value ‘bird’” or whatever the value of i[c] is. The expressions are evaluated and concatenated together.

The FB demo screen has a more full-featured example.

Possibly Related Articles

Commenting is closed for this article.