If it weren’t for Firebug, Firefox would not necessarily be the most popular web development browser. That said, without Firebug, we wouldn’t have great developer tools such as the webkit Inspector, Opera Dragonfly or IE’s Developer Tools.
The tool is crammed with amazing features. I try to keep up with developments but it’s easy to miss gems such as examining CSS :active and :hover states. Firebug 1.8 has just been released and it should automagically update in your browser. Alternatively, head over to getfirebug.com for download links and installation instructions.
Firefox 5.0 Only
If you’re still using Firefox 3.x or 4.0, I’m afraid you’re stuck with Firebug 1.7.3. Firebug development is mirroring Mozilla’s rapid update schedule so you’ll need the latest version to make use of the new features…
DOM Panel Options
Until now, Firebug has shown all DOM object properties including those within the prototype chain. Two additional options have been added:
- Show Own Properties Only remove properties of parent objects
- Show Enumerable Properties Only
CSS Color Tooltips
Firebug now shows hex, rgb, rgba, hsl, and hsla color previews like several of its competing consoles:
CSS3 Box Sizing
CSS3 introduces a box-sizing property for elements. It can be set to:
- content-box: the default CSS2.1 model where the dimensions are determined by the sum of the width, height, padding and borders.
- border-box: forces the element to render to the specified width and height which includes padding and borders.
Firebug 1.8 displays the box-sizing model used:
Firebug’s script profiling tools have been enhanced with the new
console.timeStamp([msg]) API command. When
console.timeStamp(); is encountered in your code, a timeline marker is added to the Net panel:
<script> nodes or using XMLHttpRequest methods.
For more information, see Firebug 1.8: console.timeStamp().
IP Address in the Net Panel
Sticking with the Net Panel, you can now view local and remote IP addresses for all HTTP requests. This should help you spot problems caused by slow servers or CDNs.
HTML Preview in the Net Panel
If you’re using Ajax to download HTML snippets, you’ll be pleased to hear that the Net Panel also allows you to preview the rendered code:
Additional Options for External Editors
Another feature I missed was support for external editors. As well as passing %url and %file arguments, version 1.8 introduces a %line number parameter:
Command Line Persistence
Command line instructions now persist across reloads so it’s possible to execute the same expression on different pages.
I hope you enjoy Firebug’s new tools and facilities. There’s even more coming in version 1.9…
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Your First Year in Code
HTML5 Games: Novice to Ninja