Firebug Lite and Dojo: Not Just for IE

By on June 2, 2008 12:05 am

Recently improvements have landed in Dojo Toolkit version of Firebug Lite. These improvements have taken it beyond the desperate need for logging in Internet Explorer to a very viable alternative. In fact, the reasoning behind some of the improvements I have implemented is to develop on Safari, which is so fast you sometimes forget you’re coding an application for a browser.

The Basics

If you have djConfig.isDebug set to true, Firebug Lite will launch by default if you open your page in any browser besides Firefox that has the Firebug Add-on originally created by Joe Hewitt:

Firebug Lite - 001

However, you usually don’t want your console taking up most of the page while debugging, because it obscures content and eats up screen real estate. To remedy this situation, set djConfig.popup to true. This will open Firebug Lite in its own window:

Firebug Lite - 002

Additionally, a cookie is set to remember the size and position of the window.

Firebug Lite supports all of the same logging functionality as Firebug, with the exceptions of trace() and profile(), due to the lack of available browser APIs. For the same reason, the Net tab is not implemented, and any error catching is at the mercy of the browser in use (I’ve had to jump from Safari back to Firefox to properly catch some errors). Other functionality is purposely omitted, since it would simply imitate tools that most browsers have, like CSS or DOM inspectors.

ReCSS

Firebug Lite - 003

Going across the tab row at the top of the window, the first new feature is ReCSS. Not actually a Firebug feature, this is borrowed from a bookmarklet by David Schontzler. Other browsers don’t use bookmarklets, but ReCSS is nothing more than JavaScript. So implementing it was a simple matter of finding a place for it.

If you’ve never used ReCSS, you’ve been coding too hard. Click on the tab, and the stylesheets on the page are refreshed, without refreshing the entire page. This is enormously useful in large AJAX applications where the page may take several seconds to load. Note that this doesn’t work using @import. The stylesheet must be linked as so:


DOM

Yes, I did say that a DOM inspector would imitate existing tools. However, I implemented this for a colleague who was struggling with a particularly nasty IE 6.0 bug one day (more like one month), as he expressed a wish to view the dynamic DOM to verify hover states in IE6 — the one browser without this tool. Because Firebug Lite already had some nice formatting built in with the dirxml() method, it was just a matter of grabbing the current event target from the onmousemove event, and displaying the result in its own section. The current target is outlined, and clicking on it makes it “stick”:

Firebug Lite - 004

Object

The Object Inspector is not new, but it has had some upgrades. The strange, legacy formatting is gone (unfortunately done by yours truly) and a more familiar JSON formatting is now in place. Objects in the console are highlighted as blue links. Clicking on them displays the object:

Firebug Lite - 005

Because of the new interface, the object is no longer lost when going to the Console tab and back to the Object tab.

HTML is now traceable. When logging a DOM node, such as: console.log(dojo.byId(“foo”), a brief description of the node is shown in the console. This is also highlighted in the same way objects are, and clicking on them opens the DOM description in the Object Inspector:

Firebug Lite - 006

Command Line

The command line feature has also been around for a while. The styling has been cleaned up so that it’s presence is more discoverable. A snippet history has also been implemented. Up, down, Home and End keys, will access your previous commands, which are saved to a cookie, so they are available any time.

Firebug Lite - 007

I’ve implemented many minor upgrades as well. console.dir() will trace your object directly to the console, which is sometimes a useful feature. Dates are now string-ified and logged. And best of all, an IE bug was finally killed which was wreaking havoc on the console – erasing the logs, and shrinking the display.

As much as everyone loves Firefox, the Dojo team is committed to the Open Web, which means encouraging competition amongst browsers. One way of fostering that competition is through debugging tools, such as Firebug Lite. We are trying to make it as easy as possible to code for large user-base browsers like Internet Explorer, or preferred browsers, like Safari or Opera, or… [your favorite browser here].

Where to Get It

The enhancements described in this post will be available soon in Dojo Toolkit version 1.2 to be released in late June, or via a Dojo nightly build.