Firebug 1.8 New Features

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:


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!



  1. Style Thing

    thanks for the rgba() stuff.
    have been waiting for that for a loooong time :)

    July 29th, 2011 at 19:06

  2. Auto

    Looks better than ever! Thanks.

    July 30th, 2011 at 17:56

  3. Gary

    Firebug gets even better. Thanks for this – Firebug is an unbelievably valuable (and essential) toolset.

    July 31st, 2011 at 14:54

  4. Gaurav Mishra

    Hey! Thank you Firebug :-D & also exposing the compatibility chart.

    July 31st, 2011 at 23:26

  5. Harry Wiles

    Keep up the food work, really appreciated!
    Firebug is still a web developer’s greatest asset.

    August 1st, 2011 at 01:25

  6. Chris Jordan

    What happened to the Firebug Icon in the Add-On bar? Do I need to just remember that I press F12 to open the Firebug panel?

    August 1st, 2011 at 09:47

    1. Honza

      The icon is now displayed in Firefox toolbar by default. You can use “Customize Toolbar” dialog to put the icon on the Add-on bar.

      August 1st, 2011 at 09:56

      1. SIFE

        I was looking for this a long time ago, thanks Mr Honza.

        November 13th, 2012 at 03:32

  7. Chris Jordan

    Ah! There it is in the upper-right… I tried doing the customize toolbar thing earlier before I originally posted, and I did not see firebug in the available icons to add to the Add-on bar. oh well, I can get used to it being up in the right corner.

    August 1st, 2011 at 10:38

    1. Louis R. Stephens

      It’s called “inspect” in the customize toolbar. :)

      August 2nd, 2011 at 10:35

  8. Samuka

    Really great!!
    Thanks again!!!

    Firebug is indispensable ;)

    August 1st, 2011 at 19:36

  9. Sebastien

    It seems YSlow 3.0.3 doesn’t work anymore with Firebug 1.8 :-(

    August 2nd, 2011 at 03:28

    1. Honza

      You need to ask the YSlow team. Of course, we are ready to help them!

      August 2nd, 2011 at 03:54

  10. Daniel

    Congrats on updating Firebug to 1.9a0. Thanks for the update. Firefox is the best browser and my choice of browser from last 5 years. Cheers

    September 12th, 2011 at 16:59

Comments are closed for this article.