Mozilla

Firebug 1.9 has been released and as usual I would like to get this opportunity to present some new features introduced in this version.

Firebug

First of all, check out the following compatibility table:

  • Firefox 4.0 with Firebug 1.7.3
  • Firefox 5.0 – 11.0 with Firebug 1.9
  • Firefox 12.0 (nightly) with Firebug 1.10

Firebug 1.10 alpha 1 will be available next week, you can use Firebug 1.9b6 for Firefox nightlies in the meantime.

Here is a summary of all new features

Firebug UI docking

Firebug UI can be positioned on all fours sides of the browser window. Just open the start button popup menu, pick Firebug UI Location sub menu and finally select the position you prefer the most.

Copy JSON responses to the clipboard

Are you dealing with AJAX & JSON? Firebug allows inspecting JSON responses and copying parts of the JSON tree to the clipboard. Just expand an HTTP request (in the Console or Net panel), select the JSON tab and right click in the tree to get the context menu.

Syntax error position displayed

The Console panel shows an arrow to the exact position inside the line of the syntax error when an error occurred.

New column in the Net panel: Protocol

The Net panel offers a new Protocol column displaying HTTP protocol for every request. You can use this column to sort all request by protocol and e.g. see only https requests. The column isn’t displayed by default, you need to right-click on the header and customize…

Quickly Remove Elements from the page

The well known Inspector feature allows quick removal of selected elements from the page. Just inspect an element and press Delete key to remove the currently highlighted element on the page.


Function objects: displayName property

Firebug also supports a displayName function object property. You can use this property to specify custom function name for anonymous functions. Firebug is consequently using that property to display stack traces.


Every Console log has its origin info

This is just simple new feature. Every log displayed in the Console has it’s origin (file url and line number). Of course, Firebug shows the source as soon as you click on the origin link.

Resend HTTP request

The net panel allows to resend an existing HTTP request. Just right-click on it and pick Resend from the context menu. Nice and easy!


Tooltip for conditional breakpoints

The Script panel is displaying tooltips for conditional breakpoints. You don’t have to open the condition editor to just see the current condition.


Add Watch from the DOM panel

The DOM panel context menu introduces a new Add Watch command. This allows the developer to find specific object or field (can be several layers deep in the structure) and put it directly into the Script panel’s Watch window for further inspection and monitoring.


Response Headers from the browser cache

The Net panel is displaying even HTTP headers coming from the browser cache. Just expand an HTTP request and check the Headers tab, there is a new section at the bottom (in case the response comes from the cache).


Font Viewer

Firebug introduces a font viewer (for *.woff files) integrated into the Net panel. If your page is loading such file you can expand appropriate request and see all meta data about the downloaded font. Very cool!


Font Tooltip

There is yet another neat support for designers. If you move mouse cursor over a font in the CSS panel (or in the Style side panel) you’ll see a tooltip with a font preview.


Tooltip tip for array items

Another nifty improvement is related to debugging and inspecting an array value using tooltips. If you move mouse cursor over array brackets, you can see the actual value, see the screenshot.

Stay Tuned!

Honza

44 comments

Comments are now closed.

  1. Yamcsha wrote on January 6th, 2012 at 12:38:

    cool, many thanks

  2. axlotl wrote on January 6th, 2012 at 13:10:

    The link at the top is to 1.8.4. Here is the correct link: https://getfirebug.com/downloads/

    1. Jan Odvarko wrote on January 7th, 2012 at 00:52:

      The AMO page should already offer Firebug 1.9.0 (but the change can take some time to go through caches).

      Honza

  3. Raghav Khunger wrote on January 6th, 2012 at 13:32:

    Cool! Getting better and better.

  4. Fatih wrote on January 6th, 2012 at 14:18:

    Lots of nice feature, some of them is really useful. Thanks for the update. But you’d better to work for making the current version more stable . Firebug 1.8 always crashs in different ways and sometimes it becomes really painful to work with this.

  5. Zdeněk Štěpánek wrote on January 6th, 2012 at 16:27:

    Thank you for a new version. I am going to download it right now. Díky Honzo!

  6. Rudy wrote on January 6th, 2012 at 16:27:

    wow super :D

    many thanks

  7. Skoua wrote on January 6th, 2012 at 20:03:

    Some very nice improvements, thanks!

  8. Style Thing wrote on January 7th, 2012 at 01:47:

    Thanks, very neat improvements indeed

  9. pd wrote on January 7th, 2012 at 06:39:

    Great work all involved. Unfortunately it’s depressing not to see a fix for Firebug’s zombie compartment problem.

  10. Dan wrote on January 7th, 2012 at 07:49:

    quick delete of elements is a nice addition. I’d like to see a trim function that deletes all but the selected element(s)

    1. Jan Odvarko wrote on January 7th, 2012 at 07:56:

      Please create a new enhancement report here: http://code.google.com/p/fbug/issues/list + detailed description of how the feature should work from the user perspective and we’ll take a look at it!

      Honza

  11. Fadi El-Eter wrote on January 7th, 2012 at 22:15:

    Am I the only one who had problems on Firefox ever since I installed firebug? I even uninstalled Firefox but ever since the install Firefox is getting allocated 1 GB of memory and its CPU usage is around 50%.

    1. Jan ‘Honza’ Odvarko wrote on January 8th, 2012 at 09:59:

      Please start a new thread here: https://groups.google.com/forum/#!forum/firebug – so, we can discuss the problem further.

      Memory & performance are our top priorities so, if we could put together a solid tests scenario that would be great help!

      Honza

  12. Jason wrote on January 7th, 2012 at 22:56:

    Very nice work Firebug team. Thank you so much for all that you do!

  13. AndersH wrote on January 8th, 2012 at 09:39:

    Is it shown in the net panel, if a connection is using SPDY or not?

  14. Ivan Malopinsky wrote on January 8th, 2012 at 09:54:

    Great release. Docking and syntax error position are awesome additions.

  15. Hugh Madison wrote on January 8th, 2012 at 22:37:

    Great release, thanks to all involved people for their hard work

  16. cavo789 wrote on January 9th, 2012 at 02:25:

    Thanks a lot. Firebug is a wonderful tool

  17. Aamir Afridi wrote on January 9th, 2012 at 03:56:

    Love new features, specially ‘Syntax error position displayed’

  18. Julio Silveira Melo wrote on January 9th, 2012 at 05:19:

    Syntax error position displayed is very cool!

  19. juan pablo wrote on January 9th, 2012 at 05:35:

    firebug is the best.

  20. SiPlus wrote on January 10th, 2012 at 05:52:

    Awesome! Any way to use it for XULRunner debugging?

    1. Jan ‘Honza’ Odvarko wrote on January 10th, 2012 at 05:58:

      Not at the moment

      Honza

  21. SiPlus wrote on January 10th, 2012 at 05:55:

    Could you add an ability to disable computed styles in Style panel?

    1. Jan ‘Honza’ Odvarko wrote on January 10th, 2012 at 05:59:

      Why it should be disabled? Are you experiencing some performance penalties?

      Honza

  22. Spudley wrote on January 11th, 2012 at 05:44:

    The font tooltip is a helpful addition.

    Even better would be if Firebug could tell you which of the fonts in the list is actually being used.

    eg where it shows

    font: 10px/1.4 Helvetica,”Helvetica Neue”,Arial,sans-serif;

    it could highlight “Helvetica Neue”. This will help pick up issues where a font isn’t loaded correctly (either because of a typo in the css or fonts not being installed as expected, or whatever).

    Thank you!

    1. Jan ‘Honza’ Odvarko wrote on January 11th, 2012 at 06:47:

      Try FireFontFamily (Firebug extension) http://getfirebug.com/wiki/index.php/Firebug_Extensions#FireFontFamily (see also the screenshot showing how the font being used is highlighted)

      Honza

  23. Etienne Pouvreau wrote on January 12th, 2012 at 03:56:

    Yes… but FireFontFamily seems to disabled the font tooltip

    1. Jan ‘Honza’ Odvarko wrote on January 12th, 2012 at 04:41:

      I see, please create a new report here: http://code.google.com/p/fbug/issues/list

  24. J wrote on January 13th, 2012 at 08:52:

    I have updated to 1.9 but my script panel shows only json info no script to debug any ideas of what I’m doing wrong???, thanks for your great PRODUCT!!!!

    1. Jan Odvarko wrote on January 13th, 2012 at 09:09:

      Try to disable other extensions (if you have any) or create a new Firefox profile. If the problem persist, please open a new discussion thread on Firebug newsgroup and we can solve it there: https://groups.google.com/forum/#!forum/firebug

      Honza

  25. Dmitry wrote on January 17th, 2012 at 03:38:

    Wow, thanks guys! firebud is getting better with every version

  26. kenjiru wrote on January 30th, 2012 at 03:00:

    This looks awesome! Thank you very much for your work!

  27. melchior blausand wrote on February 15th, 2012 at 03:23:

    Love all the improvements!
    When Firefox’ update told me that Firebug would be disabled, the built-in update-button had still nothing but 1.8.4! Was a little irritated.
    Just to point it out – Firebug should enter the AMO repository more quick IMHO.

    1. Jan ‘Honza’ Odvarko wrote on February 15th, 2012 at 04:23:

      > built-in update-button had still nothing but 1.8.4!
      Thanks for pointing this out, should be fixed by now.
      Honza

  28. vafa wrote on February 28th, 2012 at 08:21:

    Hello dear friend.
    When I first noticed your add-on, I was amazed. but after reloading my website, everything turned back. there were some other add-on like CssUpdate which could be used to update the server by Firebug changes. But they were not free and supported limited Css.
    Please include a condition for permanent changes. This is so important.
    Thanks

    1. Jan ‘Honza’ Odvarko wrote on February 29th, 2012 at 07:49:

      > Please include a condition for permanent changes.
      Use Firebug issue list: code.google.com/p/fbug/issues/list to make requests for enhancements. It could easily get lost here. Thanks!

      Honza

  29. Shiv Tomar wrote on March 31st, 2012 at 04:23:

    Very much needed enhancements. Good.

  30. Aghil wrote on May 17th, 2012 at 01:57:

    Hi,
    Is there any way to edit the http request and resend in firebug ?
    If there is, help me to know about it or else inform me the reason why firebug haven’t implement that. Thanks.

    1. Jan ‘Honza’ Odvarko wrote on May 18th, 2012 at 03:33:

      @Aghil: You can resend a request by right-clicking on a request entry in the Net panel and executing “Resend” action.

      Editing of the request is not supported. I recall that one of Firebug contributors was interested in providing such feature but, it never happened. This feature is currently not in our roadmap, but if you’d be interested to implement it I am ready to assist you!

      Honza

      1. Aghil wrote on May 18th, 2012 at 06:08:

        Thanks for your reply, Honza.

        I’ll try by best to implement that but i need you to assist me.

        Aghil.

        1. Jan ‘Honza’ Odvarko wrote on May 18th, 2012 at 06:18:

          Sure, let’s start with an issue report. Please create one here:
          http://code.google.com/p/fbug/issues/list
          and provide a description of how the feature should work from the user perspective. We can continue discussion under the issue report

          Honza

  31. Yoganshi wrote on May 17th, 2012 at 16:42:

    You make our life so much easier!! Thank you for all the hard work!!

Comments are closed for this article.