Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Firebug is a free and open source tool, available as a Mozilla Firefox extension, which
allows debugging, editing, and monitoring of any website’s CSS, HTML, DOM, XHR,
grown very quickly since then. Approximately 1.3 million users have Firebug installed as
of January 2009. It is a very popular tool among web developers to aid during web
The book begins with the steps to install Firebug, followed by an overview of the Firebug
window. We will get the basic idea of Firebug and movement across the different panels
and tabs within Firebug.
From there, we will make our way towards more advanced usages of each tab, such as
during client-side development and debugging of RIAs. We will also learn to use Firebug
for performance tuning our application on the browser. We have also dealt with the
tracking of XMLHttpRequest and XMLHttpResponse during AJAX development, which
is also an integral part of RIAs. We will also learn a few tips and tricks for Firebug that
will help us in configuring Firebug according to our taste and make it a pleasurable
experience to work with it.
Once we are comfortable with the usage of Firebug, we will learn to install and use some
popular Firebug extensions. This will be followed by a discussion on how to develop our
own Firebug extension.
What This Book Covers
Chapter 1: Getting Started with Firebug gives a quick introduction to Firebug, its origin
and history, who should use Firebug, and a glimpse of Firebug’s main features, hoping
that this will spark your interest in both Firebug and the rest of this book.
Chapter 2: Firebug Window Overview explains Firebug’s tabs and what they are used for.
Chapter 3: Inspecting and Editing HTML provides an understanding of using Firebug to
inspect, edit, search, and play with the HTML source of the document.
Chapter 4: CSS Development aims to help the reader to understand the useful tools and
utilities provided by Firebug for CSS development.
Chapter 6: Knowing your DOM gives a small introduction to DOM as well as discussing
how to modify/edit values of properties and constants of any DOM object using Firebug.
Chapter 7: Performance Tuning Our Web Application explains various ways to analyze
the performance of your web application on the browser.
Chapter 8: AJAX Development discusses how to track XmlHttpRequest and
XmlHttpResponse as well as debugging AJAX calls.
Chapter 9: Tips and Tricks for Firebug discusses a few tips and tricks that can be very
useful while debugging and developing. We have explained how to play with the features
that Firebug provides and what other things you should know about Firebug.
Chapter 10: Necessary Firebug Extensions explains some of the Firebug extensions, such
as YSlow, FireCookie, Page Speed, and so on. They are useful for development and
Chapter 11: Extending Firebug discusses the steps to develop a Firebug extension. We
have also discussed how to set up a development environment, along with file and
directory structure for the extension.
Appendix, A Quick overview of Firebug’s features and options gives a quick reference for
various Firebug features and options.
Knowing Your DOM
Document Object Model (DOM) is a cross-platform and language-independent
convention for representing and interacting with objects in HTML. DOM supports
navigation in any direction (such as parent and previous sibling) and allows for
Browsers rely on layout engine (for example, Gecko, Trident/MSHTML, Presto, and
so on) to parse HTML into DOM. In other words, DOM is a huge hierarchy of objects
objects quickly and then edit them on the fly.
We will be discussing the following features of Firebug in this chapter:
- 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
- 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” onkeyup=”calculateFact
Intuitive DOM element summaries
Firebug does its best to visually distinguish each, while providing as
much information as possible. When appropriate, objects include brief
summaries of their contents so that we can see what’s there without
having to click. Objects are color coded so that HTML elements, numbers,
strings, functions, arrays, objects, and nulls are all easy to distinguish.