Dojo and Firebug Tricks for Development

By on November 10, 2008 12:01 am

As an Ajax developer, I’m always looking for easy ways of helping my development process—things to make development faster, easier ways of checking things, etc. Today I’ll share two quick and easy tricks I use all the time when developing web applications using the Dojo Toolkit.

Trick #1: using to enable Firebug Lite on the fly

With the Dojo Toolkit, I find this trick indispensable. The basic concept is to use the original version of the djConfig variable—the object-based one—using a boolean to enable or disable debugging.

In a single line of code, here’s the trick:

var djConfig = { isDebug: ("debug")>-1) };

What you are basically saying is “if you find the term ‘debug’ on the query string for the page, then enable debugging with Dojo”.

As an example of usage, say you have a page called “app.html”. To enable the Firebug Lite console (in a browser other than Firefox, of course), all you need to do is reload the page with the following URL:

…and you are off to the races!

Trick #2: setting up a simple HTML file that just enables the console

This one is probably my all-time favorite—because not only does it take advantage of the Firebug console, but it also takes advantage of Dojo’s package loading system (a.k.a. dojo.require).

I create a simple HTML file, console.html, and drop it into the root of a Dojo Toolkit checkout (i.e. a sibling to /dojo, /dijit, /dojox, etc.). Here’s the entire file:

		Dojo Console Testing

This is a quick and dirty file you can use to do console-based development.

…that’s it. That’s all there is to it. All it does is load up the Dojo Base (i.e. dojo.js) and enable the Firebug console—and that’s really all you need.

Ok, so how do I use it?

I’m glad you asked… so here’s the beauty of this simple HTML file. When you load it up, open Firebug and enable the Run area:

Getting Started

Now let’s take advantage of the Dojo Toolkit’s package system. Say we have a simple XML file we want to load and make sure we parse correctly. Type this into the Run area of Firebug:


var xml=''
    + 'My first node'
    + 'My second node'
    + '';
var doc=dojox.xml.DomParser.parse(xml);

…like so:

Loading on the fly with Firebug, step 1

From there, hit Run:

After running your code…

…and then you can inspect the results using Firebug’s Object inspector tools:

Inspecting the results.

Pretty neat, huh?

So what we’re basically doing is using the dojo.require method to load up a Dojo Toolkit module (in this case, the dojox.xml.DomParser) and run some code against it. Since dojo.require always runs on-the-fly (i.e. you don’t have to pre-load modules while a page is loading, and you can even load a module long past the onload event), you can load whatever you need as you need it.

This trick works with all of the Dojo Toolkit as well—you’re not limited to non-UI based code. Loading and popping Dijits into a document to test things out will work just as well (though you might want to create a <div> container to isolate that from the rest of the document).


Every developer has their own tips and tricks they use to make their life easier; I hope these two tricks will make your own processes much more efficient!