Firebug 1.5: Editing, Debugging, and Monitoring Web Pages — Save 50%
In this article by Chandan Luthra and Deepak Mittal, authors of Firebug 1.5: Editing, Debugging, and Monitoring Web Pages, we will have a small introduction to DOM as well as discussing how to modify/edit values of properties and constants of any DOM object using Firebug.
- Inspecting DOM
- Filtering properties, functions, and constants
- Modifying DOM on the fly
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
eBook Price: $20.99
Book Price: $34.99
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 :
eBook Price: $20.99
Book Price: $34.99
About the Author :
Chandan Luthra is an agile and pragmatic programmer, and an active participant at the local open source software events, where he evangelizes about Firebug, Groovy, Grails, and JQuery. He is a Linux and open source enthusiast. He also involves himself in writing blogs, articles, and is an active member on various tech-related mailing lists. He has developed web apps for various industries, including entertainment, finance, media and publishing, as well as others.
He loves to share his knowledge and good coding practices with other team members in order to perfect their development skills. In his free time, he loves to contribute to open source technologies.
He also loves to code in JQuery with Firebug, which makes development very easy for him. He is a fond lover of Firebug and has been using it since 2007 and co-authored a book on Firebug 1.5 with Packt Publishing in the year 2010.
Deepak Mittal is a software developer based in New Delhi, India, and he has been involved with software engineering and web programming in Java/JEE world since the late 1990s. Deepak is a Linux and open source enthusiast. He is an agile practitioner and speaks about open source, agile processes, and free software at various user group meetings and conferences. He has designed and built web applications for industries including pharmaceutical, travel, media, and publishing, as well as others. He loves to explore new technologies and has been an early-adopter of quite a few mainstream technologies of today's world.
In early 2008, he co-founded IntelliGrape Software, an agile web application development company focused on Groovy and Grails. At IntelliGrape, he has been occupied with building world class applications on Grails and also mentors and trains other team members.
Deepak is a veteran user of Firebug and has been using it since 2006.