Firebug + Dijit tips
by Sam Foster

Just occassionally you meet someone who doesnt use Firebug all day. For the rest of us (or if you’ve been wondering what all the fuss is all about) here’s a little cookie’s worth of productive goodness.

In firebug you can select an element in the HTML view. It gets highlighted, and you can see the styles that apply to this element etc. But, what you might not have known, is that back in the firebug console, your selected node is available as $1.
So, $1.tagName shows you the element name, $1.parentNode etc. Right there there’s a lot you can do.

But, if you’ve got dojo on your page you can do lots more. Anything dojo has provided is also available in the console, that goes for dijit, dojox - anything in the javascript context of the current page. So, you can dojo.byId("someid"), dojo.query("#some .selector *[disabled]"). When your working with widgets, try this: in the HTML view click on the element that represents your widget. It’ll have a widgetId attribute. Now, in the console, try:


this is a pattern I repeat so often I actually printed and read the firebug manual to get around there with keyboard shortcuts. I recommend you do the same. Also useful here is dijit.getEnclosingWidget - which will find the nearest widget parent to your selected node. Now you can quickly and intuitively explore the state of your widget:


And/or, you can go back and forth between console/HTML:

dojo.query("[region]", $1).filter(function(n) {
  return dijit.byNode(n).declaredClass.indexOf("ContentPane") > -1;

.. gets you call the ContentPane domNodes that are descendants of your selected BorderContainer node. It’s not all just orientation and property inspection though. Select one of the domNodes, and:


You can even prototype interactions right here:

dijit.getEnclosingWidget($1).onSelect = dojo.hitch(
  function(){ dojo.addClass(this.domNode, "showing") }

Have fun, and keep exploring: console.dir(dijit)


This entry was posted on Thursday, March 13th, 2008 at 6:39 am and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Firebug + Dijit tips”

  1. mccain Says:

    wow, that $1 thing is cool! didnt know it. Thx

  2. SitePen Blog » Dojo Storage and Dojo Bling Says:

    [...] Sam Foster uses Firebug on a daily basis while working with Dijit. He recently explained some Firebug productivity methods . These are some of the techniques that the new SitePen Support team uses to tackle your [...]

  3. sfoster Says:

    Here’s another juicy one-liner that might give you some ideas:

    (function() { console.log("child size: %s", dojo.marginBox(this.child.domNode)[ this.horizontal ? 'h' : 'w' ]) }).call(dijit.byNode($1))
  4. pottedmeat Says:

    @sfoster I can imagine taking that a step further and using Firebug’s inspect function. Instead of logging out your result, you could build a property bag of the important information you care about from the widget and open it in the DOM tab.

    inspect((function(widget){ return { size: dojo.marginBox(widget.child.domNode)[widget.horizontal ? 'h' : 'w'], id: }; })(dijit.getEnclosingWidget($1)), 'dom')
  5. links for 2008-03-15 « d2blogtest Says:

    [...] DojoCampus » Blog Archive » Firebug + Dijit tips “in the firebug console, your selected node is available as $1″ (tags: firebug webdev dojo) [...]

  6. News » Firebug + Dijit tips Says:

    [...] Firebug + Dijit tips. News to me: Firebug has a magic $1 variable which corresponds to the currently selected node. Very handy. [...]

  7. sfoster Says:

    FYI, in recent versions of Firebug, $1 (the current node reference) went away for a while, and is now reinstated, but as $0. $1 now refers to the previously selected element. Which might be handy I supposed, but leaves a trail of now-confusing articles like this one.

Leave a Reply

You must be logged in to post a comment.