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.
It's primary goal is breaking the Javascript execution at required place in the code that is unknown to the developer beforehand. The typical example, probably well known to most web developers is: "Where in the hell is the code, which is executed if I click this button?".
Let's see how Firebug can answer this question...
Read more...
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.
Having the time-stamp is critical since Javascript code (and Firebug is entirely implemented in Javascript) is executed on Firefox UI thread. In case when the UI is blocked by time expensive operation (e.g. DOM rendering, script execution, etc.) any event sent to a Javascript handler (and so, handled on the UI thread) can be delayed. So, getting the time-stamp withing JS handler can produce impaired time results.
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.
Read more...
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.
Links
HAR Specification
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
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
In order to create additional source of information for Firebug contributors and extension developers, there is new API Reference documentation generated from Firebug source code.
The source code processing is made by js-doc-toolkit, which is an extensible doc generator for JavaScript, supporting its very specifics.
Comments are based on JavaDoc like syntax and using tags like e.g. @param (check out complete list of default tags). Firebug also defines its own specific tags like: @module, @panel, @domplate that help to match its specific architecture features.
Read more...
Since JSON explorer for HTTP network responses was quite successful feature (at least according to all the feedback I have got), I have implemented a XML Explorer that can be used to inspect XML based responses received from the server.
This feature allows to see XML data in pretty-printed and colorized fashion. Similarly to the JSON Explorer, the view is available within the Net panel (as soon as the response is XML).
See the following screenshot (click to enlarge).
The user can also right click on specific element and pick one of the Copy... actions to copy portions of the XML into the clipboard.
See an online example here.
Notice that you need Firebug 1.5a23 and higher.
There is already several posts available about fresh new release of Firebug 1.4.
And not to forget, the latest version available just today is Firebug 1.4.2 fixing some last issues.
John J. Barton writes: Firebug 1.4 is a true community achievement. We have had contributions from many developers and a few designers, with additions both large and small.
Yes, it's true, and BIG thanks also to all translators who spent time on translating Firebug to many various locales. Specifically, Firebug 1.4 has been fully translated to:
- Polish (pl-PL) Leszek Życzkowski
- Dutch (nl-NL) markh
- Swedish (sv-SE) peter3
- Danish (da-DK) AlleyKat
- Chinese (Simplified) (zh-CN) Hector Zhao, lovelywcm
- Czech (cs-CZ) Lukáš Kucharczyk, Michal Kec
- German (de-DE) Team erweiterungen.de, ReinekeFux, Benedikt Langens
- Italian (it-IT) l0stintranslation, gonzalopirobutirro
- Romanian (ro-RO) alexxed
- French (fr-FR) Nicolas Martin, Franck Marcia
- Hungarian (hu-HU) gLes
- Catalan (ca) Xavi Ivars - Softcatalà
- Turkish (tr-TR) gezmen
- Spanish (Argentina) (es-AR) eternoendless
- Russian (ru-RU) Dark Preacher
- Portuguese (Brazilian) (pt-BR) Tiago Oliveira, Diego de Carvalho Zimmermann, Alexandre Rapaki
- Spanish (Spain) (es-ES) Juan Botías
- Ukrainian (uk-UA) Andriy Zhouck
- Japanese (ja-JP) Hisateru Tanaka
I couldn't miss the chance to mention that we are yet looking for help to translate following locales:
Bulgarian, Greek, Spanish (Chille), Basque, Persian, Finnish, Korean, Mongolian, Indonesian (Indonesia), Kazakh (Kazakhstan), Chinese (Traditional), Dutch and Telugu.
If you are interested to help or know somebody please let us know. Thanks!
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
See also post related to Firebug 1.5 activation.
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...
