Several posts already announced fresh new release of Firebug 1.5 (!) and so, let me focus on one new cool feature that comes with the combo Firebug 1.5 + Firecookie 1.0.
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.
Read more...
Page load performance is largely important topic these days and virtually touches every web developer. In this post, I am going to show several page-load cases and describe how to properly read (analyze) data provided by the Net panel in Firebug.
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.
Read more...
I have already mentioned several times that the number of extensions for Firebug is unbelievable and still increasing. My guess is that there is currently about 40 extensions adding new features. And of course, this great to see!
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!
Read more...
I have recently written some documentation about how to write automated tests for Firebug (possibly even for Firebug extensions) and also how to run an official Firebug test suite. Here is a quick summary and a few links.
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:
- Open Firebug Test Console. Pick menu Tools -> Firebug -> Open Test Console.
- Put http://getfirebug.com/tests/content/testlists/firebug1.5.html URL into the URL bar (should be there by default).
- 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:
Please let us know if you see failing tests.
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.
Read more...
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.
Read more...
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.
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!
Read more...
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...
