Firebug is an exceptional tool that can increase your productivity many fold, specially if you are new to web development. However it is amazing to see a large number of web developers working without it. This article covers essential overview, useful tips and links to some really awesome resources that will help you master this wonderful tool.
I am assuming you have already figured out that you need Firefox in order to use Firebug. But the important thing to understand is that in order to master Firebug you will need to adopt Firefox as your primary browser for web development.
Now download and install Firebug, which is free open source tool available under BSD license.
To Open or Close Firebug: Use F12 or click Firebug icon in your browser’s status bar (along the bottom of the window).
Frankly best way to learn Firebug is by using it. However, before you can do that, you may need some motivation. Following is brief overview of some of the important features you will find under the default tabs; giving you an idea of how useful it is:
- Console Tab
- HTML Tab
HTML is very simple, but when the markup gets too large and nested it is difficult to pin point exact location where you need to make changes. This tab allows you to do all that with extraordinary simplicity. You can find the location by simply digging through your HTML document tree, clicking the element on the page (inspect button should be enabled) or by simply searching for a specific text. Another important feature located under this tab is CSS layout, visually illustrating all the offsets, margins, borders, padding, and sizes for you. (Official Details: Inspect and edit HTML, Visualize CSS metrics)
- CSS Tab
This tab provides you the ability to inspect and edit CSS live. You can load any CSS file called from the current page and make live changes. Here you have very simple but powerful CSS editor that supports preview of colors and images; has complete dictionary of standard CSS keywords enabling you to easily cycle between various properties while you edit; and most importantly every thing is happening live in your browser. (Official Details: Tweak CSS to perfection)
- Script Tab
- DOM Tab
- Net Tab
This tab shows you useful information about resource requests and responses on the current page. The information is broken down under several sub-tabs enabling you to analyze performance for different file types. You will also be able to examine HTTP header information and monitor XMLHttpRequest – vital for Ajax development. (Official Details: Monitor network activity)
Firebug API allows developer to add more features using extensions (typically come in the form of Firefox add-ons). Although Firebug provides powerful features on its own, some really useful extensions have been developed. Some popular extensions include:
You can use this extension to create a new cookie, delete existing cookies, see list of cookies for current site, manage cookies permissions and a lot more.
FirePHP enables you to log to your Firebug Console using a simple PHP method call. All data is sent via response headers and will not interfere with the content on your page. FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.
FireQuery enhance Firebug for jQuery development. It intelligently presents jQuery expressions in Firebug Console and DOM inspector; tracks embedded jQuery data on FireBug’s HTML tab; adds jQuerify Bookmarklet that can inject jQuery into any page enabling you experiment with pages that may not have jQuery.
- Page Speed
Page Speed performs several tests on a site’s web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed on their pages get a set of scores for each page, as well as helpful suggestions on how to improve its performance.
- Pixel Perfect
Allows web developers and designers to easily overlay a web composition over top of HTML. By toggling the composition on and off, developer can visually see how many pixels they are off. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It grades web page based on one of three predefined rule set or a user-defined rule set. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it and JSLint.
There are several more useful extensions for front-end, Python, Cold Fusion and ASP.NET developers. For comprehensive list of Firebug Extensions visit the official extensions page.
Tips & Tutorials
Here is a list of some really useful tips and tutorials related to Firebug. All these resources have been sorted by date, starting with latest tutorial on top.
- New Firebug 1.5 & Debugging Cookies
January 20, 2010 By Jan Odvarko
December 17, 2009 by Artem Russakovskii
- Firebug Net Panel: more accurate timing
November 3, 2009 By Steve Souders
- Screen Cast: How to test CSS rules with Firebug
September 28, 2009 By John D. Turner
- Video: See how I used Firebug to learn jQuery
September 21, 2009 By Dave Ward
- Digging Into The FireQuery Add-on for jQuery
September 16, 2009 By Elijah Manor
- A Guide on Advanced Logging and Benchmarking with FirePHP
August 04, 2009 By Nuno Franco da Costa
- How to Debug PHP Using Firefox with FirePHP
July 11, 2009 By Nuno Franco da Costa
- Integrating FirePHP for Ajax Development
April 03, 2009 By Christoph Dorn
- Extending Firebug – A Series of Tutorial Explaining How To Make Firebug Extensions
March 16, 2009 By Jan Odvarko
- Check Edit HTML Code with Firebug
July 22, 2009 By SuperMunk
- 10 Reasons Why You Should Be Using Firebug
June 18, 2009 By Marius Ghita
- Video: How Firebug can help you diagnose Ajax issues
June 15, 2009 By Raymond Camden
- Making a perfect grid-aligned website using Gridfox and Firebug
April 27, 2009 By Robin Bastien
- Quick & Easy CSS Development with Firebug
April 25, 2009 By Ryan Hickman
February 07, 2009 By Samer Tufail
- Screencast: Firebug Breakpoints
February 28, 2009 By Jonathan Snook
- How to use Firebug for CSS
February 04, 2009 By Kristarella
April 20, 2008 By Akash Mehta
- Firebug Tutorial – Logging, Profiling and CommandLine (Part I), (Part II)
September 09, 2007 By Michael Sync
- Introduction to Firebug
June 28, 2007 By Estelle Weyl
- FireBug Tips and Tricks
April 18, 2007 By Mojo
Please feel free to suggest any addition to the list in your comments. You may also want to read following posts containing awesome resources for web designers and developers: