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.

This extension brings a new Events panel that lists all of the event handlers on the page grouped by event type. The panel also nicely integrates with other Firebug panels and allows to quickly find out, which HTML element is associated with specific event listener or see the Javascript source code.

So, see it in action!

(more...)

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...

(more...)

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.

(more...)

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

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.

• 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

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

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.

(more...)

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.

I have fixed bunch of reported bugs (thanks to all who took the time to do these reports!) and solved some compatibility issues with Firebug 1.4. See release notes for more details.

There is also a couple of new enhancements. In case when the cookie value is JSON or XML, there are additional tabs in the UI that present the value in more readable format.

JSON Inspector

If the value is formatted as JSON, there is a new JSON tab (selected by default) displaying the value using expandable tree. Similarly as for network responses in Firebug's Net panel.

XML Inspector

If the value is valid XML document, there is a XML tab (also selected by default) displaying pretty printed & colorized XML (I think there could be something similar in the Net panel for network responses).

Try online example here (sure, you need Firecookie 0.9)