Subscribe to RSS Feed

HTTP Monitor

by Honza

We have decided to extend cooperation between Firebug and Firefox dev-tools teams (I am a member of both) and so, discussed this topic about four weeks ago at our meeting in London.

We agreed that we want to have an effective and synchronized strategy when working on in-browser developer tools. One pillar of the plan is sharing APIs, components, modules, code maintenance, etc. to avoid duplicate development effort.

The first step is sharing an independent HTTP tracking component that is based on Firebug's Net panel and can be shared among all tools that want to intercept an analyze HTTP traffic. Firebug and (built-in tools in) Firefox will be its first clients.

So take a look at what we have managed to implement and demonstrate for our Toronto meeting last week.

HTTP Monitor

We have been hardworking on extracting the Net panel logic since the London meetup and result of the effort is an extension called HTTP Monitor. It's based on Firebug's Net panel and has exactly the same purpose - display HTTP activity of the selected tab to the user. This extension has very simple UI (a XUL window) with content corresponding to what you know from the Net panel.

The extension has two main parts: front-end and a back-end. Both independent and customizable so other tools can use, for example, only the back-end.

Especially tools that are used to automatically collect page performance data (often with Selenium) and don't need the UI can profit from having reliable, simple and built-in HTTP monitor API. Customization of the front-end will be based on Firefox themes (design) and Domplate (layout).

These two parts compose the entire HTTP Monitor component.

Local & Remote Monitoring

As the previous architecture diagram already indicates, support for remote HTTP monitoring is also covered in the concept. Here is a simple list of scenarios that are already supported by HTTP Monitor (beta phase):

  1. Tracking HTTP activity of a browser tab running on the same machine.
  2. Tracking HTTP activity of a browser tab running on another machine.
  3. Tracking HTTP activity of a browser tab running on mobile

Note: HTTP Monitor extension must be installed on both sides (client/server), see instructions.

Communication between Firefox/Fennec instances is based on HTTP Monitor Remote Protocol (TCP/IP).

Using the extension should be fairly easy for those who are already familiar with the Net panel. The UI/UX is exactly the same, just available in separate XUL window. In order to open the HTTP console window pick Web Developer -> HTTP Monitor (you need to have the extension installed at this moment, it's not yet build in Firefox).

Remote HTTP tracking on Fennec requires Fennec Nightly build.

Further Resources

Are you involved in page load performance area? Are you working on HTTP traffic analyzer tools? Do you want to see specific features as part of the HTTP Monitor component?

Then you could be involved in:

Stay tuned! (or watch the repo)

Rss Commenti

11 Comments

  1. One thing I’d love to see in a future network logger is support for tracking WebSockets. I know it’s not the same protocol, but it seems an obvious extension to the development tools.

    #1 Robin

  2. Robin: We are planning on supporting websockets but are not certain about the UI. Websockets are a continuous stream of data whilst the rest of the communication in the HTTP monitor is limited (unless you are streaming a video). Maybe we should find a new way of displaying streams.

    What we do know is that they probably won't be reported in the first release.

    #2 Mike Ratcliffe

  3. Oh, understood. In my work with WebSockets though I’m let to find any inspection tools beyond logging out messages from your client code or Fiddler (which does work but forces me to resort to a Windows VM). Anything is progress at this point 🙂

    #3 Robin

  4. You are using the wrong Firefox icon.

    #4 Dan

  5. @Dan: ok, I think I have fixed it. Is it correct now?

    #5 Honza

  6. Failed to install httpmonitor-0.5.xpi on Firefox 12. 0. Which Firefox version is needed?

    #6 Ignacio

  7. Honza: Yes, thanks.

    #7 Dan

  8. [...] Via | Software is Hard [...]

    #8 HTTP Monitor: una nuova estensione per Firefox nata da Firebug | Edit - Il blog di HTML.it

  9. @Ignacio: You need at least Firefox 13 (you can also check the install.rdf file https://github.com/firebug/httpmonitor/blob/master/install.rdf)

    Honza

    #9 Honza

  10. http monitoring software is hard

    #10 jay

  11. [...] Honza made Firebug’s HTTP Monitor a standalone component, and it can now remote-monitor fennec, too [...]

    #11 A look into a Firefox work week ✩ Mozilla Hacks – the Web developer blog

Sorry, the comment form is closed at this time.