The DOM inspector allows for full, in-place editing of our document structure, not just text nodes. In the DOM inspector, Firebug auto completes property value when we press the Tab key. The following are the steps to inspect an element under the DOM tab:
- Press Ctrl+Shift+C—the shortcut key to open Firebug in inspect mode.
- Let's move the mouse pointer over the HTML element that we want to inspect and click on that element. The HTML script of that element will be shown in Firebug's HTML tab.
- Right-clicking on the selected DOM element will open a context menu. Let's select the Inspect in DOM Tab option from the context menu.
- As soon as we do that, Firebug will take us to its DOM tab.
Filtering properties, functions, and constants
Many times we want to analyze whether a function written by us is associated with an HTML element. Firebug provides us an easy way to figure out whether an event, listener, function, property, or constants are associated with a particular element.
The DOM tab is not only a tab but also a drop-down menu.
When we click on the down arrow icon on the DOM tab, Firebug will show a drop-down list from which one can select the filtering options and inspect the element thoroughly. The following are the options provided by this menu:
- Show User-defined Properties
- Show User-defined Functions
- Show DOM Properties
- Show DOM Functions
- Show DOM Constants
There are two kinds of objects and functions:
- Part of the standard DOM
Firebug can notify the difference, and shows us our own script-created objects and functions in bold at the top of the list.
- The text that is bold and green is a user-defined function.
- The text that is bold and black is a user-defined property.
- The text whose size is normal and is green in color is a DOM-defined function.
- The text whose size is normal and is black in color is a DOM-defined property.
- The upper case letters (capital letters) are the DOM constants.
We can see the actual colored depiction in Firebug's DOM tab.
In the following code, the onkeyup() event is a user-defined function for <input/> and calculatefactorial() is a user-defined function for the current window. To test this code, let's type the code in an HTML file, open it with Firefox, and enable Firebug by pressing the F12 key. Inspect the input element in the DOM.
alert ("The Factorial of "+ num + " is: " +
Enter a number to calculate its factorial
<input type = "text" name="searchBox"
Intuitive DOM element summaries
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 fly.
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.
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.
Adding/removing the DOM elements' attributes
We can add or remove the attributes (and their values) of an element on the fly. And for doing this we don't need to dig in the DOM tab. Adding and removing the attributes of any element in the DOM is very simple. Let's see an example of how to add/remove the elements' attributes.
Here we used http://www.google.com as a sample to discuss adding and removing attributes.
To remove attributes from a particular DOM element, just follow these steps:
- First, let's open Firebug in inspect mode by pressing Ctrl+Shift+C, and then select the element whose attributes are to be altered. (In our case we will choose the big input box of Google.)
- Let's drag our mouse pointer over the selected element in the HTML tab and click on the attribute that we want to remove. As soon as we do that, a mini text editor will pop up.
- Now we can remove the attribute by pressing Delete or the Backspace key followed by the Enter key.
If at any point we don't want to remove/modify the attribute, we can always press the Esc key to cancel modifications.
Adding new attributes to any DOM element is very simple. To add attributes from a particular DOM element, just follow these steps:
- We need to open Firebug in inspect mode and choose the element from DOM.
- Now, let's right-click on the selected element in the HTML tab.
- When we right-click on the DOM element, a context menu will open. Let's select the New Attribute... option from it.
- Again, the mini text editor will pop up. Let's start typing the attribute's name (in our case "class" is the attribute name).
Press the Tab key to input the value of this attribute. When we press the Tab key, our smart Firebug automatically adds an equal symbol = between the attribute's name and value.
Now we can give value to our new attribute.
If we want to continue adding more attributes, Firebug provides a very easy way for doing this. All we need to do is press the Tab key when we are done with the attribute's value part.
Now in Script tab, we can insert conditional/unconditional breakpoints in that function and debug our code.
If we move our mouse pointer over the function name on the DOM tree, then it will show a preview of the code that is written inside the definition of the function.
We discussed how we can modify/edit the values of properties and constants of any DOM object. We also saw how smart Firebug is in differentiating between values of different properties based on their types, such as String, Boolean, and so on.
We also saw how Firebug helps us to easily add and remove the attributes of any particular DOM element.
If you have read this article you may be interested to view :