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:

dijit.byNode($1)

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:

dijit.byNode($1)._started
console.dir(dijit.byNode($1).getChildren())
dojo.getObject(dijit.byNode($1).declaredClass).prototype

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:

dijit.byNode($1).setContent("boo!"); 

You can even prototype interactions right here:

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

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

Tags: Firebug