Tuesday, April 29, 2008

Network History Support for Firebug

Recently I started developing Firefox add-ons. Firefox is my browser of choice and I use it almost exclusively. Firebug comes handy when you want to analyse what you are getting from site, which I needed to do recently. I needed network history functionality to record the whole conversation but there was no such functionality in Firebug and since I prefer to work in environment/tool I am comfortable with I decided to add overlay to Firebug and add functionality myself.

Here is the add-on on Firefox add-ons: Firebug Net Panel History Overlay, current version 0.2.0. You need to log in to install it since it is still in sandbox/review phase. Here is the screen shot on how it looks like:


The code has lots of comments and it might be worthwhile giving it a look if you want to build your own net panel overlay. Here is the full source code (again log in required), version is 0.2.0, let me know if you have any comments or need any help with it. Files are as follows:

  • chrome.manifest -defines contents of the add on and sets the add on as Firebug overlay
  • install.rdf - file that describes the add on
  • /chrome/firebugNetHistory/NetPanelHistoryOverlay.xul - UI for the add on. Huh, UI is couple of buttons and label to navigate through history
  • /chrome/firebugNetHistory/NetPanelHistoryOverlay.js - main functionality for the add on, defines NetPanelHistoryOverlayModel and registeres it with Firebug
  • /chrome/firebugNetHistory/netHistoryParameters.xul and netHistoryParameters.js - dialog and dialog event handlers for setting parameters
  • defaults/preferences/netHistory.js - configuration for the add on
I tested add on with Firebug 1.1.0b10.

If you want to extend Firebug yourself - Jan Odvarko has a great tutorial on his blog.

At the moment if you have YSlow installed you might not see menu items for the net panel history in the options menu of the net panel. The problem is that YSlow is replacing menu items in the menu instead of just adding its own items.

3 comments:

  1. great tool mihailo thanks! this feature was missing really and here is a good use, why not put it in google code and open to collaborative effort?

    ReplyDelete
  2. Shouldn't you link to a relevant tag on your blog from the add-on page? It wasn't too reassuring to go to the page and see something about IIS first off ...

    ReplyDelete