Subscribe to RSS Feed

Since fresh new Firebug 1.4a13 - the Net panel introduces, among other things, several new events that allow to easily collect all network requests and also related info gathered and computed by Firebug.

This functionality should be useful also in cases where Firebug extensions want to store network activity info into a local database or send it back to the server for further analysis (I am thinking about performance statistics here).

So, if you are interested to see a simple example that shows how a listener should be implemented and registered within the Net panel read more.

How to register a listener

A listener in Firebug's internal framework is registered by addListener and unregistered by removeListener methods. These methods are implemented by every object that fires an event(s). In this particular case, we are registering our listener into Firebug.NetMonitor object (module), but there is bunch of other objects.

Notice that we usually want to register the Net panel listener when Firebug is initialized (Firefox window opened) and unregister when Firebug is destroyed (Firefox window closed). See the following source code snippet.

Firebug.NetListenerModule = extend(Firebug.Module,
{
    initialize: function(owner)
    {
        Firebug.Module.initialize.apply(this, arguments);

        // Register NetMonitor listener
        this.netListener = new NetListener();
        Firebug.NetMonitor.addListener(this.netListener);
    },

    shutdown: function()
    {
        Firebug.Module.shutdown.apply(this, arguments);

        // Unregister NetMonitor listener
        Firebug.NetMonitor.removeListener(this.netListener);
    }
});

Firebug.registerModule(Firebug.NetListenerModule);

Implementation of the NetListner object is below.

Net panel events

In order to collect all network activity info we can utilize following events.

  • onRequest(context, file) - A network request has been sent. This event is fired just after http-on-modify-request event.
  • onExamineResponse(context, request) - A network response has been receivied, but not yet processed by Firebug. This event is fired just after http-on-examine-response event. This is the right place where response headers should be modified before they are read by Firebug.
  • onResponse(context, file) - A network response has been received. Notice that response body doesn't have to be downloaded at this moment yet.
  • onResponseBody(context, file) - Entire response body has been downloaded.

Listener implementation

The purpose of our example listener is to store URL and elapse time of every request into a file. First of all take a look at the implementation.

function NetListener(outputStream)
{
    var dirService = Cc["@mozilla.org/file/directory_service;1"]
        .getService(Ci.nsIProperties);

    // Get unique file within user profile directory.
    var file = dirService.get("ProfD", Ci.nsIFile);
    file.append("netlistener");
    file.append("netMonitor.txt");
    file.createUnique(Ci.nsIFile.NORMAL_FILE_TYPE, 0666);

    // Initialize output stream.
    this.outputStream = Cc["@mozilla.org/network/file-output-stream;1"]
        .createInstance(Ci.nsIFileOutputStream);

    // write, create, truncate
    this.outputStream.init(file, 0x02 | 0x08 | 0x20, 0666, 0);
}

NetListener.prototype =
{
    onResponse: function(context, file)
    {
        var text = file.href + " (" + formatTime
            (file.endTime - file.startTime) + ")\n";
        this.outputStream.write(text, text.length);
    }
};

A few notes.

  • As you can see, the object doesn't have to implement methods for all events. Firebug frameworks always tests if the specific method exists and don't fire the event if it doesn't.
  • Since we want to store all info into a file, we have to open a file output stream. This is done within NetListener's constructor. Every Firefox window session creates its own file. All these files are created within user profile directory under netlistener sub-directory.
  • The outputStream should be closed within Firebug.NetListenerModule.shutdown method.

Complete example with FBTrace support included is here.


Rss Commenti

13 Comments

  1. Thanks for the great tutorials. I downloaded the example extension from SVN and can see it working, but am having trouble with making sure Firebug is enabled and running. Any thoughts on how to make sure that all new pages have the Firebug enabled so that the netlistener will pick up on the requests? I would really like to use this technique to gather relative performance metrics for a site we are developing but will need to automate the testing process and will need Firebug and the netlistener to record all pages for the browser session.

    #1 Benjamin Lee
  2. You could write an extension that opens/enables Firebug automatically for each new opened page. We are doing similar things in our automated Firebug testing framework. See: http://code.google.com/p/fbug/source/browse/tests/content/FBTestFirebug.js
    and look for enableAllPanels method.

    #2 admin
  3. Just what I need :) , but can't get it to work.
    I checkout examples/firbug1.4/netlistener into my Firefox profile ~/extensions/netlistener/chrome/content/netlistener@softwareishard.com and I restared Firefox.
    Where is output file located??
    I can't find the output file when I run Firebug Net.

    #3 Siyalrach Anton Thomas
  4. The file is located in your current Firefox profile directory. Look for "netlistener" subdirectory that should contain all log files. Notice that according to the new Firebug's activation model the Net panel must be enabled and active within the tab. Please let me know if you have any suggestion how to improve the APIs, thanks!

    #4 admin
  5. It is working now :) , I had to change the folder name to netlistener@firebug.com.
    But how do I export the response body? is there any API I can look at?

    #5 Siyalrach Anton Thomas
  6. Try following:
    onResponseBody: function(context, file)
    {
    var body = file.responseText;
    }

    #6 admin
  7. I'm trying to get an specific responseText, I tried to use a regular expressions:

    onResponseBody: function(context, file){
    var body = file.responseText;
    var re = id;
    if(re.test(y)){
    this.outputStream.write(body, body.length);
    }
    }

    But I only get an empty output

    #7 Siyalrach Anton Thomas
  8. re.test(y) need to be re.text(body)

    #8 Siyalrach Anton Thomas
  9. I found the solution for the problem :)

    var body = file.responseText;
    var re = /id/g;
    if(re.exec(body)){
    this.outputStream.write(body, body.length);
    }

    #9 Siyalrach Anton Thomas
  10. [...] LinkedIn [...]

    #10 Script For Firebug Testing | c2oo.com
  11. SourceForge is using it for their Beacon-project:

    http://sourceforge.net/apps/trac/sourceforge/wiki/beacon

    #11 Lennie
  12. very useful to me!
    And is there a event for the whole page load complete, so that my extension could be notified when all the components are loaded?

    #12 reno
  13. @reno: No, but something similar is already done in NetExport extension (exporting data collected by the Net panel in HAR format). If you create a new ticket (http://code.google.com/p/fbug/issues/list) for this I'll take a look at it (this could be functionality of the Net panel itself).

    #13 Honza

Sorry, the comment form is closed at this time.