Firebug is one of the most popular tool used by web developers – It is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. When you are not using Firefox you can use Firebug Lite – a JavaScript file that you can insert into your pages to simulate some Firebug features in IE, Opera, and Safari.
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.
Let’s Start
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).
Default Tabs
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
This tab is your best friend when things go wrong. Enabling this tab will allow you to find detailed and useful information about the errors in JavaScript, CSS, and XML. Here you can dump all type of information using a set of powerful logging functions that you can call from your own web pages. Additionally this tab also contains JavaScript command line tool enabling you to execute JavaScript on the fly. (Official Details: Quickly Find Errors, Execute JavaScript on the fly, Logging for JavaScript) - 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
Script tab contains a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is little sluggish, you can use the JavaScript profiler to measure performance and find bottlenecks fast. You can work on any JavaScript file loaded or generated in the current page. (Official Details: Debug and profile JavaScript) - DOM Tab
The Document Object Model is a big hierarchy of all objects and functions that you can manipulate with JavaScript. Firebug helps you quickly find DOM objects under this tab and then edit them on the fly. Since you can create your own objects using JavaScript, Firebug will show them in bold so you can easily differentiate them from standard DOM objects. The DOM explorer is also a great way to find JavaScript functions that you wish to debug. If you click on a function in the DOM explorer, Firebug will take you right to the Script tab and highlight the function.(Official Details: Explore the DOM) - 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)
Extensions
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:
- Firecookie
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
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
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
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 - How To Make Firebug’s JavaScript Debugger Break Inside Dynamic JavaScript Using The ‘debugger’ Keyword
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 - JavaScript / CSS debugging using FireBug
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 - JavaScript Debugging Techniques with Firebug
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:
nice post!
visit firebug for IE
http://www.firebugger.com
I don’t know how I ever worked without Firebug. It is absolutely essential for me in my work and saves me hours of development time. Console.log and the dynamic css manipulation abilities are worth they’re weight in gold for me.
Like the sound of firebugger too Eyal, thanks.