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.
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):
- Tracking HTTP activity of a browser tab running on the same machine.
- Tracking HTTP activity of a browser tab running on another machine.
- 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.
- Source code (GIT, pull requests welcome!)
- Wiki page
- Download (always use the latest release)
- Remote Protocol
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)