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
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
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?
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.
expression will be evaluated and the result will be assigned to the variable.
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.
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’)
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.
Latest posts by Krishna Srinivasan (see all)
- 5 New Features in HTML5 - November 29, 2013
- How To Set Tomcat JVM Heap Size in Eclipse? - November 28, 2013
- How To Resolve “Resource Is Out Of Sync With The Filesystem” Error in Eclipse? - November 28, 2013