DOM Panel

Firebug and DOM Exploration

The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.

Love your own

There are two kinds of objects and functions - those that are part of the standard DOM, and those that are from your own JavaScript code. Firebug can tell the difference, and shows you your own script-created objects and functions in bold at the top of the list.

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.

Don't forget, the DOM editor is a miniature JavaScript command line. That means that you can write any JavaScript expression you want. When you hit enter it will be evaluated and the result will be assigned to the variable.

Autocomplete

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')[0]." to see all properties of the first link in the document.

Reload restoration

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.

JavaScript code navigation

The DOM explorer is also a great way to find JavaScript functions that you wish to debug. If you click on a function in the DOM explorer, Firebug will take you right to the Script tab and highlight the function.

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.

HTML attributes

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.