dijit.byNode and firebug fun

Here’s a little tip if you’re working with dojo widgets. In firebug you can select an element in the HTML view. Back in the firebug console, your selected node is available as 

1
$1
So, 
1
$1.tagName
shows you the element name, etc.

If you’ve got dojo on your page you can use anything dojo has provided in the console, and if you’re using dijit, you also have that stuff too. So, in the HTML view click on the element that represents your widget. It’ll have a 

1
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. 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. Click on one, and:

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

its your page, have fun!