Firebug 1.8 compatible with Firefox 5.0 has been released and I would like to get this opportunity and introduce some new features in this version.

Firebug 1.8 has been also uploaded to AMO, but it can take some time to appear.

First of all, check out the following compatibility table:

• Firefox 3.6 with Firebug 1.7.3
• Firefox 4.0 with Firebug 1.7.3
• Firefox 5.0 with Firebug 1.8 (and also Firebug 1.7.3)
• Firefox 6.0 with Firebug 1.9a0 (and Firebug 1.8 as soon as 6.0 is out)
• Firefox 7.0 with Firebug 1.9a0
• Firefox 8.0 with Firebug 1.9a0

console.timeStamp()

There is a new API that can be used to create time-stamps during Javascript execution and compare them together with HTTP traffic timing on the timeline in the Net panel: console.timeStamp();

See detailed description of this feature with examples how to use it.

IP Address displayed in the Net Panel

The Net panel displays remote & local IP address + port number for each request. There are two additional columns, see the screen-shot:

HTML Preview Reloaded

This feature is back and better than before. Now you can adjust height of the preview by drag-and-drop to see more or less content as necessary.

Improved Script Location List

Script location list available in the Script panel adjusts its size automatically according to the screen size and uses scroll-bar as needed. This makes easier for the user to pick up the right script.

Command Line Content Persistence

Command line content is now persistent across reloads. This feature allows to quickly execute the same expression on different pages. This is one of many little details that make Firebug the indispensable tool.

New DOM Panel Options

The DOM panel has two new options:

• Show Own Properties Only check if you don’t want see the prototype chain for objects
• Show Enumerable Properties Only check if you want to see only enumerable properties

CSS Panel Color Tooltips

A tooltip with color preview is displayed for colors specified in various formats. Supported formats are: hex, rgb, rgba, hsl and hsla.

Shortcuts for Changing CSS values

Firebug is great when tweaking CSS of the current page to perfection. Now, there are also new keyboard shortcuts for changing CSS values (numbers).

• Ctrl+Up/Down increases/decreases by 0.1
• Shift+Up/Down increases/decreases by 10

Better Support for External Editors

As you might know Firebug allows to configure and open an external editor (or IDE). There has been two arguments you could pass to such editor:

• %url URL of the file (if %url is not present, %file will be added by default)
• %file Path to the local file (or to the temporary copy)

Firebug 1.8 introduces a new %line argument that allows to open the external editor scrolled at the right position (according to the current scroll position in the the Script panel).

• %line Line number

Box Sizing Exposed

CSS3 introduced a new property called box-sizing, which allows the user changing the box model for an element and thereby influence element layout. Value of this property is now exposed in the Layout side panel.

Stay Tuned!

Honza