Firebug 1.5

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.

Comments

comments

Pages: 1 2 3

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*