Subscribe to RSS Feed

See also Firebug 1.4 activation model.
See also post related to Firebug 1.5 activation.

One of the most noticeable thing (apart from bunch of bug-fixes) of the upcoming Firebug 1.2beta4 (check AMO) is new UI for Firebug activation.

We have been hardworking on this (UI is hard), following carefully all the great user feedback on Firebug newsgroups, and this version has finally something, which looks like quite promising solution (I am curious about the next user feedback ;-).

In the previous version (Firebug 1.05 and 1.1), it was only possible to disabled/enable Firebug entirely (and/or for specific site). However, most of the Firebug features don't reduce Firefox performance and thus can be available and handy all the time. For instance, the DOM Inspector is indispensable tool for a lot of users and there is no performance penalty when using Firefox.

The solution we have chosen makes possible to independently enable/disable those features that can reduce Firefox performance (now disabled by default). The other features are just available and there is no reason to disable them.

So, the following panels are currently activable:

  • Console logging - Console panel
  • Javascript Debugger - Script panel
  • Network monitoring - Net panel

We have introduced a new menu, which is accessible directly from the panel's tab. See the following screen-shots. You can also notice that disabled tab label is grayed out (click the image to enlarge it).

Firebug activation menu

and...

Firebug activation menu

The menu is available for all activable panels (i.e. for those which can be enabled/disabled) and is displayed only for the currently selected tab so, the space on the tab-bar isn’t wasted. The menu target (the black-arrow) can’t be overlooked by the user, but it’s also not eye catching.

All the activable logic is behind these four options:

  1. Enabled – The panel is enabled for all sites.
  2. Disabled - The panel is disabled for all sites.
  3. Enable <panel>for <site> - The panel is enabled for specific site.
  4. Disable <panel> for <site> - The panel is enabled for specific site.

So, some users who use Firebug just occasionally can keep all activable panels disabled and perhaps enable them only for some specific sites. The others can enable all panels and perhaps disable them just for sites like e.g. gmail.

There is also additional Sites... option that displays list of sites for which the panel has been enabled or disabled.

List of enabled/disabled sites

You can see that in this case, Network Monitor has been enabled for www.google.cz.

Finally, the following page is displayed for a disabled panel (Net panel in this case). The page allows one click enablement of the panel and also activation of multiple panels at once. The user can just select appropriate panels and press Enable selected... button.

Firebug\'s panel disabled

The internal architecture of the UI is extensible so, possible Firebug extensions can utilize all the APIs and hook up into the UI as well. This will be useful especially for the user as the activation approach will be the same thorough entire Firebug IDE.

I welcome any new ideas about how to improve the UI!


Rss Commenti

31 Comments

  1. I think this gives us webmasters the maximum options that will suit everyone's needs. A great tool gets even better.

    #1 John Conde
  2. Step in good direction, but I do not like the UI.

    Enabling/disabling a panel should be instant - use [Enable] and [Disable] button on each row.

    Change the "Enable selected panels..." button to "Reload page to populate newly enabled panels" and only enable this when user really enabled some panel.

    #2 Ondrej Brablc
  3. Where can I download Firebug 1.2beta4 the Mozilla Addons site has 1.2beta3

    #3 Ahmad
  4. One gripe I have is that the Firebug icon in the status bar is a really small target to hit. I know that I can press F12, but I’d prefer to have a button that I can click. Now it’s also possible to add a Firebug icon to the toolbar, but this opens Firebug in a new window instead of at the bottom of the page!

    So I’d love if you could fix it so that the toolbar button opens it in just the same way as F12 and the status bar icon do; that is, clicking opens Firebug inside the current page, and CTRL-clicking it opens Firebug in a new window.

    ~Grauw

    #4 Laurens Holst
  5. My Firebug version for some reasons don't update to this release, while AMO feature the new version. Please keep in mind that automatic updates should be enabled for the extension, as I don't know how much web programmers will ever check the site to see if there is new version.

    #5 Tomer Cohen
  6. I agree with Ondrej Brablc. I would prefer that the checkbox click directly enables/disables the panel, while the button was explicit about reloading the page. Without an explicit warning that the page will be reloaded, it gives an uneasy feeling that something is going wrong. Plus I might be checking something through other panels, and the reload will lose the firebug context (maybe even the page context).

    Of course, the issue is the same with the new menu, and it's not easy to decouple both actions (enable and reload) in this case. I would prefer the panel to go in an "activated but empty" state (with a label inside saying a page reload is necessary to populate it), rather than the automatic reload.

    About the sites dialog, it seems like each panel has its own dialog. Why not consolidate all panels in one dialog, adding a panel column to the table, that could be filtered on? That would also require replacing the Enable/Disable buttons above the table by a list of checkboxes. I think it would give a better global overview of per-site settings.

    Thanks for the great work on Firebug.

    #6 Stephane Fidanza
  7. I forgot to say that automatic reloading triggers the reload of all tabs displaying a page of the corresponding domain. I don't know if this is on purpose, but it's also something I would prefer to avoid.

    #7 Stephane Fidanza
  8. (just got back from my holiday)

    @Ahmad: check AMO again, FB1.2b4 has been released just yesterday.

    @Laurens Holst: This looks like a bug to me. You are right, the toolbar button should behave the same way as the status bar icon and F12. I'll fix it.

    @Tomer Cohen: The new version was just released yesterday, if the update still doesn't work for you, the problem is with AMO.

    @Ondrej Brablc, Stephane Fidanza: I like the idea of avoiding the page-reload + "activated but empty" label.

    As far as the sites dialog is concerned, we are utilizing permissions.xul dialog implemented in Firefox (originally designed for cookie permissions) and this new feature would require a new overlay (preferably) of entire new dialog. This could be perhaps considered for FB 1.3

    #8 admin
  9. The is absolutely crappy. Even if I disable all possible features it damages firefox performance a lot. Where's the good old "Disable Firebug"? It was awesome.

    #9 John Riverside
  10. It would be fine if it works: unfortunately often Firebug simply decides to debug broken script on sites for which I've never enabled it; worse, even after explicitly unchecking the "script debug" option, it still continues to appear on script errors (even when "break on errors" is unticked). This makes firebug+firefox unusable for browsing the web.

    I'm with the other commentors: it's nice to be able to enable specifics but I also want a "disable for msdn.microsoft.com" (just as an example ;-]) option, as in v1.

    #10 Geoff Winkless
  11. I kind of like the new setup, but I seem to have one minor problem.

    I just installed FF3 and go the 1.2.0beta4 upgrade off firebug with it. While I can enable the individual tabs, I can't disable it. The drop down menus on the tabs don't appear.

    #11 Martin
  12. @Martin - thanks for the report! This looks like Issue #884 http://code.google.com/p/fbug/issues/detail?id=884
    The drop down menu wasn't visible when FB was opened in a new window. However it should be fixed in b5

    #12 admin
  13. I preferred the old way of disabling Firebug. It was quick and right there...no need to go through individual menus. The performance is still an issue on certain sites. For example, I work on a portal with quite deeply nested DOM structure...Firebug reduces performance of Firefox to a crawl. If I try navigating from one section to another (in the portal), it takes more than 2 minutes to load the page. I don't know how to disable Firebug for the site once it has been enabled and have to shut down Firefox and start it up in safe mode so I can browse through the portal...I just can't take the performance slowdown. Please put back the ability to right-click on Firebug icon and disable Firebug completely, or for certain sites. I'm ashamed to admit it, but I've actually started using IE much more because of this (and previously, frequent crashes in Firefox 2.x). Now I'm in Firefox 3.x, but performance is still a huge issue. Thanks for the great product and please continue your great work.

    #13 bart
  14. That's nice and dandy, but I also preferred the old way.

    Why not let every user choose the activation method he prefers?

    #14 paketep
  15. @bart:
    > "I don't know how to disable Firebug for the site > once it has been enabled"
    This look like a bug: http://code.google.com/p/fbug/issues/detail?id=884 - this one should be fixed in Firebug 1.2.0b6 - check https://addons.mozilla.org/en-US/firefox/addon/1843.

    Thanks to all for your feedback about enable/disable options, I appreciate that! I am also carefully watching all the feedback on Firebug Group (see http://groups.google.com/group/firebug/search?hl=en&group=firebug&q=disable+enable+option&qt_g=Search+this+group)

    There is a lot of opinions on this already and I hope I'll figure out the best way how to improve this - you know, UI is hard 😉

    Honza

    #15 admin
  16. I want to put in my vote for bringing back the old style disable firebug, sometimes I just want it off! 😀 Thanks for this great tool though!

    #16 Ben
  17. Another vote for the good old way of disabling Firebug. However, I gotta add that this extension changed my way of developing forever!
    Very good job!!!

    #17 Javier
  18. Thanks for Firebug, its a great and indispensable tool. However, please bring back the possibility to actually disable Firebug completely, since there are drawbacks with also the other panels that I wish to avoid sometimes, by just bypassing the whole firebug extension. Right now I must disable the extension in the ad-on handler and restart firefox, which is a bit tiresome.

    /Tobias

    #18 Tobias
  19. BRING BACK DISABLE FIREBUG!! I'm amazed at the arrogance of your logic to leave firebug enabled. You don't know how people work, what they have installed, etc. This is the classic example of people having to change their behavior for software rather than the other way around. I've been forced to uninstall firebug completely from my computer as a result. Seriously, what is to be gained from this decision vs. what is to be lost? What harm is it to leave the old behavior in place? While I love what firebug does, this is FAIL.

    #19 Sean Stoner
  20. > I'm amazed at the arrogance of your logic to leave firebug enabled.
    First of all, Firebug is *disabled* by default so, there is no performance penalty if you just install it (if you see some, please report a bug).

    > You don't know how people work, what they have installed,
    Second of all, I am very carefully listening what users says about Firebug user experience all the time - and I really appreciate the feedback (there are almost no comments with such offensive tone as yours). So, I think I do know what people want.

    > What harm is it to leave the old behavior in place?
    Because the old behavior was just wrong. Just follow the Firebug forum, see e.g. this discussion" http://groups.google.com/group/firebug/browse_thread/thread/19fb57ff04e33079/025a0e262bf5148d

    Finally, I would recommend you to try FB1.2.0b10, which should be released in a few days - this version has pause/resume feature and I believe this is what you are screaming for.

    #20 admin
  21. Please bring back the old ability to enable/disable ALL of firebug with one quick checkbox. Have to go into each tab, or disable it in my firefox addons is a pain in the neck. It doesn't matter how fast YOU think it is.

    Great tool otherwise.
    Thanks.

    #21 Sherri
  22. Just so you know - firefox is officially recommending to disable firebug or create a separate profile. Perhaps this, along with all the screams to revert to the old way of doing this, will finally get you to see the light:

    "You're using Firebug? I highly recommend creating a second profile for it and only using that profile when developing. Firebug hooks in very deeply and in complex ways and is known to have many serious problems (though I still depend on it.)" source @firefox_answers on twitter

    #22 Sean Stoner
  23. Please install latest Firebug 1.2.0b13 (AMO) and right click the status-bar icon. There is a new option (since b10) - "Suspend Firebug".

    #23 admin
  24. Because everybody is given you a hard time, I say I love it. It does what it need to do.
    I do have a suggestion do; combine all (currently) 3 enable/disable windows in one window. More control is here the key.

    gr J

    #24 jerone
  25. @jerone: Thanks!

    #25 admin
  26. I would also like the old way of disabling Firebug to be brought back.

    It's a great tool!

    #26 Another Ben
  27. Hi,
    I installed firebug 1.2.1
    I've enabled it for some sites and now I want to disable it but I can't find any menu or button to do it.
    Thanks for any help.

    #27 booooobooooo
  28. The best way how to find a solution for problems related to Firebug is to ask at:
    http://groups.google.com/group/firebug/topics

    Or file an issue here:
    http://code.google.com/p/fbug/issues/list
    (it would be awesome if you attach a simple test case that helps to reproduce the problem)

    Thanks!
    Honza

    #28 admin
  29. Just my 3 bits:

    1/ Not beeing able to glibally disable firebug is somewhat a pain
    2/ I upgraded from ff2 to ff3 with firebug 1.0 The resulting combination was amazing in term of speed (something like a x20 speedup), because I had quite a lot of console log. Then I moved to firebug 1.1, and got a speedown, which is noticable even if I only enable the console.
    3/ I had to go to this very post to understand how to disable firebug after having enabled it. That is what I call a UI fail of major proportions. It comes from the fact that the first enable is in a certain place (from a user standpoint): the main firebug window. But, as soon as you have used that to enable all 3 options, you will not get that panel again in that same place. Counter-intuitive as hell.

    That being said, firebug rocks soooo hard...

    #29 fred
  30. I did have to come here to read how to enable netpanel for all sites, because I misses the dropdown arrow feature of Net tab

    Perhaps you can add a button next to the "Add wwww.google.co.uk to Net" button, that just says "Enable/Disable for all sites"

    Multiple routes to achieving the same thing is always a good thing

    #30 Matt
  31. The activation model has been aggressively simplified in Firebug 1.4a14. Hopefully we have taken the right approach this time. Download from here: http://getfirebug.com/releases/index.html

    #31 admin

Sorry, the comment form is closed at this time.