What’s New in Firebug 1.8

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

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://loadingicon.com loadingicon.com

    Good news. Use this all the time at work. Without it would take me ages to debug my AJAX code as it shows AJAX server response, unlike opera dragonfly and the tools available on chrome. Well they didn’t have that feature when i tested them 3 months ago anyway. If thats changed let me know.