Installation and Getting Started with Firebug

Exclusive offer: get 80% off this eBook here
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages — Save 80%

Arm yourself to destroy UI and JavaScript bugs

₨646.00    ₨129.20
by Chandan Luthra Deepak Mittal | April 2010 | Open Source Web Development

In this article by Chandan Luthra and Deepak Mittal, authors of Firebug 1.5: Editing, Debugging, and Monitoring Web Pages, you will be introduced 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 Firebug.

In this article, 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 modes

What is Firebug?

Firebug is a free, open source tool that is available as a Mozilla Firefox extension, and allows debugging, editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript. It also allows performance analysis of a website. Furthermore, it has a JavaScript console for logging errors and watching values. Firebug has many other tools to enhance the productivity of today's web developer.

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.

Firebug simply makes it easier to develop websites/applications. It is one of the best web development extensions for Firefox. Firebug provides all the tools that a web developer needs to analyze, debug, and monitor JavaScript, CSS, HTML, and AJAX. It also includes a debugger, error console, command line, and a variety of useful inspectors.

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.

The history of Firebug

Firebug was initially developed by Joe Hewitt, one of the original Firefox creators, while working at Parakey Inc. Facebook purchased Parakey in July, 2007.

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.

The need for Firebug

During the 90s, websites were mostly static HTML pages, JavaScript code was considered a hack, and there were no interactions between page components on the browser side.

The situation is not the same anymore. Today's websites are a product of several distinct technologies and web developers must be proficient in all of them—HTML, CSS, JavaScript, DOM, and AJAX, among others. Complex interactions happen between various page components on the browser side. However, web browsers have always focused on the needs of the end users; as a result, web developers have long been deprived of a good tool on the client/browser side to help them develop and debug their code.

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.

Firebug capabilities

Firebug has a host of features that allow us to do the following (and much more!):

  • Inspect and edit HTML
  • Inspect and edit CSS and visualize CSS metrics
  • Use a performance tuning application
  • Profile and debug JavaScript
  • Explore the DOM
  • Analyze AJAX calls
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages Arm yourself to destroy UI and JavaScript bugs
Published: April 2010
eBook Price: ₨646.00
Book Price: ₨1,078.00
See more
Select your format and quantity:

Installing Firebug on different browsers

Firebug is developed as a Firefox add-on and can be installed on Firefox similar to all other add-ons. In order to make Firebug work for non-Firefox browsers, there is a JavaScript available from Firebug that makes available a large set of Firebug features.

Based on your browser version, we can install the corresponding Firebug version.

Firebug version

Browser version

Firebug 1.5

Firefox 3.5 and Firefox 3.6

Firebug 1.4

Firefox 3.0 and Firefox 3.5

Firebug 1.3

Firefox 2.0 and Firefox 3.0

Firebug Lite

IE, Safari, and Opera

Installing Firebug on Firefox

To install Firebug on Firefox, we will follow these steps:

  1. Open Firefox browser and go to https://addons.mozilla.org.
  2. In the search box of the site, type Firebug and hit Enter or click on the Search for add-ons button.
  3. In the search results, click on Add to Firefox button.
  4. A pop up will appear asking whether we want to continue with the installation. We will now click Install now.
  5. 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.

Installing Firebug on non-Firefox browsers

Firebug is an extension for Firefox, but that doesn't mean it works only on Firefox. What happens when we want to test our pages against Internet Explorer, Opera, or Safari? Firebug Lite is the solution for this. It's a product that can be easily included in our file via a JavaScript call, just like any other JavaScript, to support all non-Firefox browsers. It will simulate some of the features of Firebug in our non-Firefox browsers.

To use Firebug Lite on non-Firefox browsers, we should include the following line of code in our page:

<script type='text/javascript' src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=
'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>

For more information and updates on Firebug Lite, refer to http://getfirebug.com/lite.html.

If we don't want to modify the source code of our page and still want to use Firebug Lite on a non-Firefox browser, we can run Firebug as a bookmarklet by creating a bookmark with the value of the URL as the following JavaScript code:

javascript:var firebug=document.createElement('script');
firebug.setAttribute('src','http://getfirebug.com/releases/
lite/1.2/firebug-lite-compressed.js');
document.body.appendChild(firebug);
(function()
{
if(window.firebug.version)
{firebug.init();}
else
{setTimeout(arguments.callee);}
})();
void(firebug);

We can inject Firebug into any page by running the bookmarklet created with the preceding URL.

Opening and closing Firebug

Opening and closing Firebug is very easy. We can open as well as close Firebug by pressing the F12 key or by clicking the Firebug(bug) icon on the right-hand side of the browser's status bar.

Undock Firebug
By default Firebug opens in a dock view. If we want to open it in its own window, we can accomplish this by either clicking on the Firebug icon on the upper right corner of Firebug or by pressing the keys Ctrl+F12.

Firebug modes

Firebug can be opened in the following two modes:

  • Dock view
  • Window mode

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.

Dock view

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

Window mode

The window mode is useful when we use its Console tab or Net tab. When we execute a large JavaScript code, we expect a large area where we can write easily. Similarly, the results shown by the Net tab require a big screen to examine it easily. Window mode is the best solution in this case.

Firebug

Summary

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.


If you have read this article you may be interested to view :


Firebug 1.5: Editing, Debugging, and Monitoring Web Pages Arm yourself to destroy UI and JavaScript bugs
Published: April 2010
eBook Price: ₨646.00
Book Price: ₨1,078.00
See more
Select your format and quantity:

About the Author :


Chandan Luthra

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

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.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

CMS Made Simple 1.6: Beginner's Guide
CMS Made Simple 1.6: Beginner's Guide

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

CodeIgniter 1.7 professional development
CodeIgniter 1.7 professional development

Plone 3.3 Multimedia
Plone 3.3 Multimedia

Django 1.1 Testing and Debugging
Django 1.1 Testing and Debugging

AJAX and PHP: Building Modern Web Applications 2nd Edition
AJAX and PHP: Building Modern Web Applications 2nd Edition


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software