About a month ago, I wrote a post introducing a HTTP Archive format that is used to export data from Firebug's Net panel.

Since that time we have made further progress and following info could be useful for all who are dealing with HTTP tracing logs and page load performance.

  • NetExport - (requires Firebug 1.4a26 and higher) an extension that allows exporting HTTP tracing data from Firebug. This extension appends a new Export button into Firebug's Net panel toolbar (see the screenshot bellow).
  • HTTP Archive Viewer - online tool that allows previewing of existing logs. The viewer uses the same visual style for visualizing HTTP tracing data as the Net panel. Note that it's possible to compare tracing info generated by multiple pages (which is also something what is planned for Firebug 1.5)
  • HTTP Archive Format - description of the format for exported data (doc updated according to feedback we've got).

NetExport

HTTP Archive Viewer

A while ago, I have written a post about Firebug 1.2 activation that is used to enable and disable certain Firebug features and avoid performance penalties the user could pay when not using Firebug and just browsing with Firefox.

Since that time we have gathered a lot of feedback related to the activation model saying in short: it's too complicated, I don't understand how to use it. Even if it's not exciting to receive negative responses, thanks to all who took the time to explain what could be done better!

We worked hard to improve the activation. Kudos to John J. Barton who put a good deal of work into this and also thanks to Steve Souders for all his input.

So, read the rest of the post if you interested in how the activation model has been designed for Firebug 1.4.

Read more...

Since there is not much user documentation related to Firebug features (and there is a lot what to know about) I have decided to put together several posts about existing features.

This post is intended as a detailed explanation of the Net panel from the user perspective. This post is not about developing an extension for this panel or Firebug itself. Also notice that all features described below are available (some of them introduced) in Firebug 1.4.

You'll be surprised how many features is there! :-)

Read more...

I have got an opportunity to speak at the O’Reilly Velocity Conference 2009, happening on June 22-24, 2009 in San Jose. I'll be part of Performance Tools panel (24.6, Regency Ballroom) talking about Firebug's Net panel and its contribution to better and faster web.


Velocity 2009

If you are interested and also want to attend the conference, use VEL09FSP code to get 15% discount off the price.

One of the new features planned for future version of Firebug is export of all collected data within the Net panel (HTTP tracing info). This feature has been requested several times and it should be useful mainly for further analysis by other tools.

There is currently several existing tools that can be used for HTTP tracking. To name a few:

They have various advantages over each other. For example, in-browser tools can easily group requests by page and analyze browser-cache usage while network-level tools can easily gather low level detailed info (e.g. HTTP compression). But in general, they all can be used to track HTTP traffic.

It would be obviously very beneficial to have a common export/import format that is used across all HTTP tracing tools and perhaps other projects. This would allow effective processing and analyzing data coming from various sources.

I have put together a document (fist draft) that represents a proposal for HTTP Archive export/import format (based on HTTPWatch's structure, but designed for JSON). Any comments and suggestions are greatly appreciated!

Many thanks to Simon Perkins (HTTPWatch) who provides all necessary info.

A viewer for HTTP Archive data is available here.
A NetExport extension for exporting data from the Net panel is available here.

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.

Read more...

I have been recently asked by couple of developers how to properly design architecture of a Firefox extension. The first thing that immediately came to my mind at that point was a problem with global variables defined by extensions in ChromeWindow scope.

This problem can easily cause collisions among various extensions. Something that should be always avoided (and is also part of AMO review process) since this kind of issues is very hard to find. Yes, global variables are still evil, especially in OOP world.

I don’t want to describe how to develop a new extension from scratch. For this there is already bunch of detailed articles. I am rather concentrating on effective tactics how to make Firefox extension architecture maintainable and well designed.

So, read more if you are interested…

Read more...

Thanks to Ashish Datta, Firebug is having a fresh new support for inspecting JSON in net responses. This feature allows to see JSON formatted as an expandable tree of items and also explore them using Firebug's Dom tab.

The view is available within Net panel and visible as soon as a JSON request is expanded. In such a case the user can see another tab (like Params, Headers, etc.). See the following screen-shot.

Explore JSON response using a JSON viewer

By clicking on links within the view (green labels) the user is automatically navigated to the Dom tab to explore particular parts of the JSON response as javascript objects.

The feature should be part of Firebug 1.4a11.

Ahshis is a senior at Tufts University and he did this work as a part of his class focusing on open source development. It's great to see how community around Firebug is growing and willing to contribute to this indispensable tool!

I've been recently working with John Resig on his great Firebug extension called Fireunit. This very promising extension is intended as an automated testing framework for Firefox extensions and it should also be useful for testing web pages in the future. It's still at the beginning, but growing and starting to be very useful for testing Firebug itself.

Such unit test framework is what I have been waiting for a long time. Not only debugging and profiling is important and the unit testing was the missing piece in the Firebug world.

Read more...

One of the new features introduced since Firebug 1.4a2 is possibility to extend Net panel with additional info. There are new APIs that allow to create a custom info-tab for network requests (like Headers, Params, etc.) from within a Firebug extensions.

This post is intended (a) to show how these APIs should be properly used by Firebug's extensions and also (b) to gather some feedback about the architecture.

So, let me know please, if there is something I haven't thought about when designing this new extension point.

Custom info tab for network request.

Read more...

Next Page »