Mozilla

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.

Firebug

First of all, check out the following compatibility table:

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

14 comments

Comments are now closed.

  1. Style Thing wrote on July 29th, 2011 at 19:06:

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

  2. Auto wrote on July 30th, 2011 at 17:56:

    Looks better than ever! Thanks.

  3. Gary wrote on July 31st, 2011 at 14:54:

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

  4. Gaurav Mishra wrote on July 31st, 2011 at 23:26:

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

  5. Harry Wiles wrote on August 1st, 2011 at 01:25:

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

  6. Chris Jordan wrote on August 1st, 2011 at 09:47:

    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?

    1. Honza wrote on August 1st, 2011 at 09:56:

      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.

      1. SIFE wrote on November 13th, 2012 at 03:32:

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

  7. Chris Jordan wrote on August 1st, 2011 at 10:38:

    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.

    1. Louis R. Stephens wrote on August 2nd, 2011 at 10:35:

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

  8. Samuka wrote on August 1st, 2011 at 19:36:

    Really great!!
    Thanks again!!!

    Firebug is indispensable ;)

  9. Sebastien wrote on August 2nd, 2011 at 03:28:

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

    1. Honza wrote on August 2nd, 2011 at 03:54:

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

  10. Daniel wrote on September 12th, 2011 at 16:59:

    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

Comments are closed for this article.