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,
and JavaScript. Firebug 1.0 beta was released in December 2006. Firebug usage has
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
application development.

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
CSS development, JavaScript development, and DOM modification. This will aid us
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 5: JavaScript Development explains command line API, console APiof Firebug,
and debugging JavaScript in detail.

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
performance tuning.

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
arbitrary modifications. Through JavaScript, one can easily traverse within the DOM.
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
and functions, just waiting to be tickled by JavaScript. Firebug helps us find DOM
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


• JavaScript code navigation

Inspecting DOM

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:

1. Press Ctrl+Shift+C—the shortcut key to open Firebug in inspect mode.


2. 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.


3. 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.





4. 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


• Refresh

There are two kinds of objects and functions:

• Part of the standard DOM


• Part of our own JavaScript code

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.

	<html>

		<head>

			<script>

				function calculateFactorial(num,event){

					if(event.keyCode!=13){

						return;

					}

					var fact=1;

					for(i=1;i<=num;i++){

						fact*=i;

					}

					alert (“The Factorial of “+ num + ” is: ” +

						fact)

				}

			</script>

			<title>code_6_1.html.html</title>

		</head>

		<body><font face=”monospace”>

			Enter a number to calculate its factorial

			<input type = “text” name=”searchBox” onkeyup=”calculateFact

				orial(this.value,event)”/>

		</font>

		</body>

	</html>

	Intuitive DOM element summaries

	There are many different kinds of DOM and JavaScript objects, and

	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.