Modifying DOM on the fly

There are lots of great features of Firebug, one of them being editing the DOM
element’s properties and constants on the fl y.

It’s no fun to just look at the DOM; many times we want to change it. The reason for
changing it could be related to debugging JavaScript. Consider a scenario where we
have an <input/> element in our DOM whose disabled attribute is set to true (that
is, the input box is locked and no event would be fired for that element). Now, we
have written a JavaScript code that expects the <input/> element is not disabled.
Firebug notifies us on the error console that this particular element is disabled and
access to the element is denied. What will we do here?

We can edit our source code and reload the page to test the JavaScript code or
inspect the <input/> element by double-clicking the white space of the row in
the tree where the disable attribute is written. Firebug is smart enough to toggle
between true and false. Therefore, if the value for disable is true, Firebug will
automatically make it false.

	If the property or constant value is string/integer/decimal type (that is,

	non-Boolean) then a little editor will appear that will let us change the

	value of the variable in question.

	Never forget

	The DOM editor is a miniature JavaScript command line. This means we

	can write any JavaScript expression we want. When we press Enter, the

	expression will be evaluated and the result will be assigned to the variable.

Auto-complete

Editing the DOM is a lot easier with auto-complete. Using the Tab key we 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.

As the minieditor on the DOM tab is a JavaScript command line, we can always enjoy
the auto-complete feature while editing the values in the DOM tab. Auto-complete
works like a charm at many levels. We can start pressing the Tab key before we type
anything to cycle through global variables. We can press the Tab key after typing
document.b to cycle through all properties that start with b. We can even press the Tab
key after a complex expression such as document.getElementsByTagName(‘a’)[0] to see all properties of the first link in the document.

	Sometimes while editing a value, we may realize that it is not supposed to

	be edited. In this case simply use the Esc key to cancel editing.

Losing the starting element

Some of the properties of the DOM tree are expandable. We can see a + symbol next
to some properties. If we click on the + (expandable column) of the explorer, Firebug
will expand the object within the current view, but if we want to give an object the
full view, just click the link (that appears in the right column) to the object.

Each time we click an object, Firebug will append to the path in the toolbar. That
shows us the breadcrumb trail of properties that were accessed on the way to
locating that object. We can click any part of the path to jump back to it.