This neat feature simply allows to upload the data in HAR format to the server and share them with others online.

Note that similar thing (uploading and sharing of measured data) is also supported by YSlow and PageSpeed (also using ShowSlow).

Another good news is that ShowSlow is an open source (I love open source!) and so, if you want to keep your data private while having the advantage of simple sharing (and other nice ShowSlow fetures), you can download and install your own copy of ShowSlow server (and also avoid limited upload history on the public instance).

So, read more if you are interested.

(more...)

Note that there is also a Firebug extension called Firebug Paint Events made by Kyle Scholz, which introduces a new Paints panel and nicely highlights areas that have been repainted directly on the page.

Displaying the event also withing the Net's panel timeline allows to see when exactly the event occurred relatively to the other stuff happening when a page is loading.

See those green vertical lines, these indicate when the event fired.

So far, there is an option that needs to be checked (off by default) to enable this feature, but if it's successful and the timeline is not always cluttered by bunch of green lines, it could be on by default (or perhaps the option could be removed from the UI eventually).

The current implementation tracks the event only during the page load and 2 sec after the onload event. This avoids excessive extending of the 'time' axis and so, degrading the entire waterfall graph.

Firecookie is an extension to Firebug that allows managing cookies in your browser. Latest 1.0v has been also just released on AMO and it's fully compatible with Firebug 1.5.

Since Firebug 1.5, introduces a new Break on next feature (among other things) that can be used to break Javascript execution on various events (e.g. on XHR) fired by the current page, it was straightforward that this can be also useful for debugging cookies.

(more...)

Just to quickly summarize, the purpose of the Net panel is to intercept network communication between a web-page and the server and see what's going on under the hood. All created reports (logs) can be exported by NetExport extension (in HAR format) and there is also an online viewer allowing to preview all exported logs in graphical form.

In order to put together all following examples (HTTP activity logs) I used:
Firefox 3.6 + Firebug 1.5 + NetExport 0.7.

(more...)

Many of these extensions are creating new panels with various additional info, often related to the current web-page and the problem is that there is not enough horizontal space to display all the panel tabs at once. So, after installing enough number of extensions, the situation can look like as follows.

The screenshot clearly shows what happens if there is too many tabs. The search box is pushed off the screen and it's not possible to even see the other tabs...

Please help us to decide how to solve this problem!

(more...)

Firebug Test Doc Home
Running Automated Test Suite
Test Examples
Test API

Running Automated Test Suite

Running the official test suite is as easy as installing Firebug and FBTest (Firebug) extension.

At some point (I hope in FB 1.6), the FBTest extension will be part of Firebug developer build (with an 'X' in the name) so, running tests should be even easier.

To execute all tests:

1. Open Firebug Test Console. Pick menu Tools -> Firebug -> Open Test Console.
2. Put http://getfirebug.com/tests/content/testlists/firebug1.5.html URL into the URL bar (should be there by default).
3. Press Run All button on the toolbar.

There are some tests that require Firefox 3.6 so, the recommended configuration (to see all green) is:

• Firefox 3.6
• Firebug 1.5

Please let us know if you see failing tests.

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.

(more...)

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.

(more...)

So, you can happily use Eventbug even with Firefox 3.6!

Download Eventbug and Firebug 1.5.

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.

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