Firebug and DOM Exploration
Love your own
To be even more discriminating, use the options menu to completely hide different kinds of objects. For instance: Show Own Properties Only hides derived properties from the prototype chain, Show Enumerable Properties Only hides non-enumerable properties and Show Inline Event Handler shows inline event handlers that are not associated with functions.
Informative object summaries
There are many different kinds of objects, and Firebug does its best to visually distinguish each, while providing as much information as possible. When appropriate, objects include brief summaries of their contents so you can see what's up without having to click. Objects are color coded so that HTML elements, numbers, strings, functions, arrays, objects, and nulls are all easy to distinguish.
Edit as you go
It's no fun to just look at the DOM, sometimes you want to change it. Double-click the white space of any row in the tree and a little editor will appear that will let you change the value of the the variable in question.
Editing the DOM is a lot easier with autocomplete. Using the tab key you can complete the name of object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.
Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing "document.b" to cycle through all properties that start with "b". You can even hit tab after a complex expression like "document.getElementsByTagName('a')." to see all properties of the first link in the document.
It took many clicks, but you've finally found that broken DOM object you were looking for. You write some more code in your editor and now you want to reload the page and see if the object is fixed. Don't worry, Firebug won't make you dig up the object again after the reload. Reloading the page will restore the full path of objects and even the position of the scrollbars.
Follow the ancestor path
If you click on the left column of the explorer, Firebug will expand the object within the current view, but if you want to give an object the full view, just click the link to the object in the right column.
Each time you click an object Firebug will append it to the path in the toolbar. This path shows you the breadcrumb trail (aka ancestor path) of properties that were accessed on the way to locating that object. You can click any part of the path to jump back to it.
The DOM panel is also a wonderful way to inspect HTML attributes. You can see those objects as a simple list of name-value pairs.
Local & session storage
If you need to explore local or session storage use the DOM explorer. Individual items in the storage are displayed as an expandable tree with support for inline editing.