In this chapter, we will have a quick introduction to Firebugâits origin and history, who should use Firebug, and a glimpse of Firebug's main features. Hopefully this will spark your interest in both Firebug and the rest of this book. We will also look at how to install Firebug on several browsers and the different modes in which Firebug can be opened.
In this chapter, we will look at the following:
What is Firebug
The history of Firebug
The need for Firebug
The capabilities of Firebug
Installing Firebug on different browsers
Opening and closing Firebug
Firebug integrates with Firefox to put a wealth of development tools at our fingertips while we browse a website. Firebug allows us to understand and analyze the complex interactions that take place between various elements of any web page when it is loaded by a browser.
Although Firebug allows us to make changes to the source code of our web page, the changes are made to the copy of the HTML code that has been sent to the browser by the server. Any changes to the code are made in the copy that is available with the browser. The changes don't get reflected in the code that is on the server. So, in order to ensure that the changes are permanent, corresponding changes have to be made in the code that resides on the server.
Currently, the open source development and extension of Firebug is overseen by the Firebug Working Group. It has representation from Mozilla, Google, Yahoo, IBM, Facebook, and many other companies.
Firebug 1.0 Beta was released in December 2006. Firebug usage has grown very fast since then. Approximately 1.3 million users have Firebug installed as of January 2009.
The latest version of Firebug is 1.5. Today, Firebug has a very open and thriving community. Some individuals as well as some companies have developed very useful plugins on top of Firebug.
Firebug fills this gap very nicelyâit provides all the tools that today's web developer needs in order to be productive and efficient with code that runs in the browser.
Based on your browser version, we can install the corresponding Firebug version.
Firefox 3.5 and Firefox 3.6
Firefox 3.0 and Firefox 3.5
Firefox 2.0 and Firefox 3.0
IE, Safari, and Opera
Open Firefox browser and go to https://addons.mozilla.org.
In the search box of the site, type Firebug and hit Enter or click on the Search for add-ons button.
In the search results, click on Add to Firefox button.
A pop up will appear asking whether we want to continue with the installation. We will now click Install now.
After installation is complete, let's restart Firefox.
When the browser comes up, it will prompt us by saying a new add-on has been installed. Now we are all set and ready to play with Firebug.
For more information and updates on Firebug Lite, refer to http://getfirebug.com/lite.html
We can inject Firebug into any page by running the bookmarklet created with the preceding URL.
In the dock mode, the Firebug opens the document in the browser's window while in the window mode the Firebug opens in its own window, which is separate from the browser window.
Most often we use the dock view mode of Firebug while developing. In this mode, the inspection and CSS tweaking can be done more easily than in window mode. The advantage of this mode is that the user can view the rendered page while simultaneously working on Firebug.
Firebug is an extremely useful web design and development tool that integrates seamlessly with Firefox. Firebug has a huge worldwide user base along with a very open and thriving eco-system.
We now have an idea of how to install Firebug on Firefox and Firebug Lite on non-Firefox browsers. Installing Firebug is as simple as installing any other add-on or extension of Firefox. We have also seen some of the ways of opening, closing, and undocking Firebug, and learned when to use dock view and when to use window mode for different purposes.