Firebug 1.5 beta phase has started (about a month ago) and so, I would like to also summarize state of Firebug activation model (I wrote about how to enable and disable Firebug 1.2/1.4). This feature has been always a bit unconvincing and we have got a lot of feedback with various proposals how to do it differently.
Since there is many views on how the activation model should look like (from the user experience point of view) and these vary in the (UI) implementation, we have decided to create a Firebug extension Firestarter that extends Firebug's built-in activation model.
Distribute activation enhancements using such an extension is faster than waiting for new Firebug release and it can also be used as an incubator for better solutions.
I have recently written a post about Break on Next feature (), introduced in Firebug 1.5 that allows breaking on various events occurring on a page. One of the examples I mentioned was XMLHttpRequest execution.
In this post I would like to describe another way how Firebug can be used to debug XHR. This time I want to focus on how to create XHR conditional breakpoints.
Just a quick update. Thanks to Rob Campbell all necessary APIs for running Eventbug (Firebug extension for inspecting event handlers on a page) have been successfully backported into Firefox 3.6 (they are now part of Firefox 3.6b3pre).
So, you can happily use Eventbug even with Firefox 3.6!
Download Eventbug and Firebug 1.5.
We have made a great further progress with John J. Barton on a new extension for Firebug called Eventbug. Big thanks to Olli Pettay (smaug) for fixing #448602 + #506961 and providing new Firefox APIs that allow enumerating event listeners on a web page!
Notice that these APIs are available in Firefox 3.7a1pre (I hope they'll make it into 3.6) and you also need Firebug 1.5 to test it.
Update: all necessary APIs for Eventbug have been backported to Firefox 3.6b3pre.
So, see it in action!
I have recently wrote several posts about new features introduced in Firebug 1.5 (so far beta 1 is available) and now I would like to describe another great feature called Break On Next (or simply Break On), which is also new in Firebug 1.5.
This feature extends the idea of breakpoints, which is one of the cornerstones of todays debugging tools and I believe that Break On Next brings a breath of fresh air to the world of debugging & breakpoints.
Let's see how Firebug can answer this question...
I have been waiting for a long time to write about this great news. Since bug #488270 has been fixed in Firefox 3.6 (beta), Firebug 1.5 (beta) uses a new API to measure timing of underlying network activity more precisely.
Firebug now uses a component called http-activity-distributor that allows to register a listener and get notifications about various phases of each network request (DNS Lookup, connecting, sending, etc.). The most important thing is that one of the parameters passed to the listener is a time-stamp. This is something what was missing till now.
Firebug Net panel now fixes this problem and the timing info is correct. See couple of examples I have analyzed when testing with a nice online tool called Cuzillion developed by Steve Souders.
We have been working with Simon Perkins and Steve Souders on an open format for exporting HTTP tracing information. It's called HTTP Archive (HAR) and we have just finished spec v1.1.
The format is already supported by Firebug (with NetExport extension installed), HTTPWatch 6.2 and also DebugBar 5.3. Further tools like Show Slow and Cesium could be the next.
The key idea is to have a common format for archiving HTTP information that are captured by HTTP sniffers. These logs contain valuable info about page load performance and can be further used to analyze and optimize weaknesses of the monitored page.
There is already a few blog posts about this, explaining all details and so, let me just summarize the most important links here.
HAR Discussion Group (first post moderated)
HAR Viewer Online preview of *.har files.
NetExport Firebug Extension for exporting HTTP logs.
Recommended Firebug Configuration: Firebug 1.5a26+, NetExport 0.7b5
I had an opportunity to attend WebExpo 2009 conference that was held this weekend in Prague, Czech Republic. As usual, I met bunch of smart people and had also a chance to give a 45 min talk about new features implemented in upcoming Firebug 1.5b1 and Firebug extensibility.
As I promised at the session, my slides (in Czech language) are now on-line and so, anybody who couldn't attend the session can (roughly) see what I was talking about. There is also a list of useful links (at the last slide) so, use it if you haven't written them down during the session.
This weekend, I attended a Mozilla Camp conference organized in Prague, Czech Republic. It was very nice time and as usual, great opportunity to meet people from Mozilla community.
- I have met Antonin Hildebrand long time Firebug extension developer who is author of several extensions: FireRainbow, FireQuery,
FirePython and some more...
- I had an interesting discussion with Josh Soref (aka Timeless) who is the guy working on Firefox JSD APIs. We need to make sure all necessary patches are reviewed and pushed through. His work is very valuable for Firebug!
- I was also happy to meet another Firebug extension developer Robert Nyman, the author of Firefinder Firebug extension.
- I had a chance to speak with Anthony Ricaud, the Web Inspector guru from WebKit team!
- And finally, I had a very productive meeting with Paul Rouget, French Mozilla evangelist, talking about Firebug and how it could be improved and evangelized.
I had also an opportunity to lead a session about Firebug talking about new features introduced in v1.5.
As I promised at the session, I am putting online my slides so, you can go over again and also try all the links I have mentioned. Not sure how useful are these slides for those who haven't heard me talking, but you can give it a try
One of the new features introduced in Firebug 1.5 (you need a24) is a possibility to specify what info should be displayed within the Net panel.
This is achieved by introducing a new header with customizable columns. Just right click on the header and pick any column you want to show or hide. Of course, the current state of the header is stored in preferences and so persistent across Firefox sessions.
(click to enlarge)
Notice that the Reset Header item can be used to get back the default header state.
I am personally often interested in the HTTP timeline and so, it's nice to get more horizontal space by hiding the other columns that I don't need at the moment.
(click to enlarge)
Having the header is also useful for couple of other features:
- Sorting according to a specific column
- Customizable size of a column