What’s New in Firebug 1.8

Share this article

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

Firebug DOM Panel options

CSS Color Tooltips

Firebug now shows hex, rgb, rgba, hsl, and hsla color previews like several of its competing consoles:

Firebug CSS color tooltips

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 CSS3 box-sizing

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:

console.timeStamp

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.

Firebug Net panel IP address

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:

Firebug Net panel HTML preview

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:

Firebug external editors

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 BucklerCraig Buckler
View Author

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.

firebugfirefoxMozilla
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week