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:
console.timeStamp
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:
The feature is especially useful when assessing the performance of HTTP requests for JavaScript files dynamically loaded by appending 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…
