Firebug 1.9 New Features

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

About Jan Honza Odvarko

Honza is working on Firefox Developer Tools

More articles by Jan Honza Odvarko…


44 comments

  1. Yamcsha

    cool, many thanks

    January 6th, 2012 at 12:38

  2. axlotl

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

    January 6th, 2012 at 13:10

    1. Jan Odvarko

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

      Honza

      January 7th, 2012 at 00:52

  3. Raghav Khunger

    Cool! Getting better and better.

    January 6th, 2012 at 13:32

  4. Fatih

    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.

    January 6th, 2012 at 14:18

  5. Zdeněk Štěpánek

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

    January 6th, 2012 at 16:27

  6. Rudy

    wow super :D

    many thanks

    January 6th, 2012 at 16:27

  7. Skoua

    Some very nice improvements, thanks!

    January 6th, 2012 at 20:03

  8. Style Thing

    Thanks, very neat improvements indeed

    January 7th, 2012 at 01:47

  9. pd

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

    January 7th, 2012 at 06:39

  10. Dan

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

    January 7th, 2012 at 07:49

    1. Jan Odvarko

      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

      January 7th, 2012 at 07:56

  11. Fadi El-Eter

    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%.

    January 7th, 2012 at 22:15

    1. Jan ‘Honza’ Odvarko

      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

      January 8th, 2012 at 09:59

  12. Jason

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

    January 7th, 2012 at 22:56

  13. AndersH

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

    January 8th, 2012 at 09:39

  14. Ivan Malopinsky

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

    January 8th, 2012 at 09:54

  15. Hugh Madison

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

    January 8th, 2012 at 22:37

  16. cavo789

    Thanks a lot. Firebug is a wonderful tool

    January 9th, 2012 at 02:25

  17. Aamir Afridi

    Love new features, specially ‘Syntax error position displayed’

    January 9th, 2012 at 03:56

  18. Julio Silveira Melo

    Syntax error position displayed is very cool!

    January 9th, 2012 at 05:19

  19. juan pablo

    firebug is the best.

    January 9th, 2012 at 05:35

  20. SiPlus

    Awesome! Any way to use it for XULRunner debugging?

    January 10th, 2012 at 05:52

    1. Jan ‘Honza’ Odvarko

      Not at the moment

      Honza

      January 10th, 2012 at 05:58

  21. SiPlus

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

    January 10th, 2012 at 05:55

    1. Jan ‘Honza’ Odvarko

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

      Honza

      January 10th, 2012 at 05:59

  22. Spudley

    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!

    January 11th, 2012 at 05:44

    1. Jan ‘Honza’ Odvarko

      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

      January 11th, 2012 at 06:47

  23. Etienne Pouvreau

    Yes… but FireFontFamily seems to disabled the font tooltip

    January 12th, 2012 at 03:56

    1. Jan ‘Honza’ Odvarko

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

      January 12th, 2012 at 04:41

  24. J

    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!!!!

    January 13th, 2012 at 08:52

    1. Jan Odvarko

      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

      January 13th, 2012 at 09:09

  25. Dmitry

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

    January 17th, 2012 at 03:38

  26. kenjiru

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

    January 30th, 2012 at 03:00

  27. melchior blausand

    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.

    February 15th, 2012 at 03:23

    1. Jan ‘Honza’ Odvarko

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

      February 15th, 2012 at 04:23

  28. vafa

    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

    February 28th, 2012 at 08:21

    1. Jan ‘Honza’ Odvarko

      > 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

      February 29th, 2012 at 07:49

  29. Shiv Tomar

    Very much needed enhancements. Good.

    March 31st, 2012 at 04:23

  30. Aghil

    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.

    May 17th, 2012 at 01:57

    1. Jan ‘Honza’ Odvarko

      @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

      May 18th, 2012 at 03:33

      1. Aghil

        Thanks for your reply, Honza.

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

        Aghil.

        May 18th, 2012 at 06:08

        1. Jan ‘Honza’ Odvarko

          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

          May 18th, 2012 at 06:18

  31. Yoganshi

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

    May 17th, 2012 at 16:42

Comments are closed for this article.