Have you ever been interested in what extensions are available for Firebug? If yes, take a look at what I have found. Frankly, I was quite surprised how many Firebug extensions already exists out there.

  • YSlow
  • Firecookie
  • FirePHP
  • RainbowForFirebug
  • Jiffy
  • Firequark
  • LiveCoder
  • PixelPerfect
  • FirebugCodeCoverage
  • Firebug Net Panel History Overlay
  • Fireclipse
  • Chromebug

Read more...

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!

Just a quick update for all who just installed fresh new Firefox 3 and want to use latest compatible Firecookie extension.

Download Firecookie 0.6

I would also strongly recommend to  use Firebug 1.2 with Firefox 3.

FBTrace Console

by Honza

I have already mentioned a few times how useful is FBTrace (made by John J. Barton) for debugging Firebug. So, for those who are interested how Firebug works internally, it's something I would definitely recommend to use.

As the name indicates, FBTrace represents support for tracing within Firebug, notice that it isn't part of the release version of Firebug. So, if you would like to try it out, you have to download a version that includes tracing support from public SVN repository. See this readme.txt for more details about individual branches.

At the present, I would recommend to use branch Firebug 1.2 (or download beta with tracing here) as it's currently the version under development.

If you have managed to successfully install Firebug with tracing support, you should see a new panel called FBTrace. This panel shows many options (you can see them in the Options menu too) that represent various areas in Firebug internal framework. If you want to see some log messages related to a specific area, just click appropriate option (it's bold if it's on) and refresh the current page (or restart Firefox) - depends on specific option. Now, Firebug should print bunch of log messages into the system console window.

In order to see the system console, don't forget to launch Firefox with -console option on the command line.

FBTrace panel

I am using the console quite often (sometimes it's only the way how to track down what is actually happening) and I have soon realized how much I am missing the following:

  1. Quickly find out where is the piece of code that prints the message.
  2. Search within all messages whether specific log is there.
  3. Put a separator at the end of the list.
  4. Clear the log.

A few weeks ago, I couldn't resist and I have written down a simple replacement of the tedious and black system console. The new console is based on domplate - quite powerful UI template system in Firebug (I'll write something about this too) - it intercepts FBTrace's logs and displays it in more readable way.

Every message is expandable so, you can see additional information. E.g. there is a stack trace for each log (you can click it and see the source code).

There are also some actions available in the toolbar.

  1. Clear - removes all messages from the log.
  2. Find - displays standard find bar at the bottom of the window.
  3. Bookmark - puts a separator at the end of the list.
  4. Restart Firefox
  5. Exit Firefox

All these simple features helped me a lot. I haven't spent much time on testing (used with: WinXP, FF3, FB 1.2) as it's done mainly for my personal usage. But, if you want to explore more how Firebug's code works and you think this could help, download the new trace-console from here.

If it turns out to be really useful, it could be perhaps core part of the FBTrace in the future.

Enjoy!

I have been asked by a few people, why there is no support for managing cookies in Firebug. It's actually unbelievable that this great extension doesn't have that already. Even if there is a few nice Firefox extensions for cookie administration out there, it would be still very useful to have something like that directly within Firebug's UI. That's what they say...

Since I have some experience with Firebug's internal framework, I have reserved two entire weekends (and I have missed two movie-sessions with my friends) trying to accomplish the supplication. And here is what I have done. The extension is called Firecookie - it's for Firebug, heh :-) - and of course, you need to have Firebug installed if you want to check this out.

I have tested it with Firebug 1.05 and Firebug 1.1. It's also tested with Firefox 2.0 and Firefox 3.0b2 (Windows XP). All seem to be working well, but you know software is hard, so there might be some bugs ;-).

Anyway I would strongly recommend using entirely new Firebug 1.1 Beta, which is now available. Check it out John J. Barton, Justin Dolske and others have been working hard on it!

Please, drop me a line if you would have any ideas how to improve it. And of course, tell me if anything doesn't work as expected ;-)

The extension's home page is here.

Enjoy!