Subscribe to RSS Feed

Thanks to Ashish Datta, Firebug is having a fresh new support for inspecting JSON in net responses. This feature allows to see JSON formatted as an expandable tree of items and also explore them using Firebug's Dom tab.

The view is available within Net panel and visible as soon as a JSON request is expanded. In such a case the user can see another tab (like Params, Headers, etc.). See the following screen-shot.

Explore JSON response using a JSON viewer

By clicking on links within the view (green labels) the user is automatically navigated to the Dom tab to explore particular parts of the JSON response as javascript objects.

The feature should be part of Firebug 1.4a11.

Ahshis is a senior at Tufts University and he did this work as a part of his class focusing on open source development. It's great to see how community around Firebug is growing and willing to contribute to this indispensable tool!

I've been recently working with John Resig on his great Firebug extension called Fireunit. This very promising extension is intended as an automated testing framework for Firefox extensions and it should also be useful for testing web pages in the future. It's still at the beginning, but growing and starting to be very useful for testing Firebug itself.

Such unit test framework is what I have been waiting for a long time. Not only debugging and profiling is important and the unit testing was the missing piece in the Firebug world.


One of the new features introduced since Firebug 1.4a2 is possibility to extend Net panel with additional info. There are new APIs that allow to create a custom info-tab for network requests (like Headers, Params, etc.) from within a Firebug extensions.

This post is intended (a) to show how these APIs should be properly used by Firebug's extensions and also (b) to gather some feedback about the architecture.

So, let me know please, if there is something I haven't thought about when designing this new extension point.

Custom info tab for network request.


Yesterday, I got back home from Barcelona where I have attended EU MozCamp 2008 conference. I spent very nice and inspirational weekend with smart people, talking about Mozilla, Firefox and of course, Firebug. All perfectly organized, no rock slides this time 😉

I had also an opportunity to lead a session about Firebug and Chromebug on Sunday. See my slides if you are interested, however I don't know how much useful they are without me talking 😉

I was having nice time, discussing a lot of things and talking to many people. Here is a short list with some areas I have been mainly interested in...

  • I was talking with Robert Kaiser and several other people about Thunderbird/Sunbird and Firebug/Chromebug integration. This could be quite easy to do and useful to have.
  • After discussion with Brian King, I believe that adapting the existing Firefox Addon Manager in order to manage installed Firebug's extensions is the right approach.
  • I also had another chat with Christian Biesinger about Necko & Events. He gave me a lot of info about how Necko & Events work internally. Thanks Christian for all the help!
  • I had a chance to meet Goofy (the BabelZilla guru) and talk about Firebug localization.
  • And yea, I have also met Tony Farndon who is the creator of Mini Map Sidebar. One of the winners of Extend Firefox Award competition.

I wrote a post about my FBTrace Console extension a few months ago and as it turned out that the console is actually quite useful for exploring how Firebug works internally, it's part of the Firebug's code base now.

This new feature is integrated in Firebug 1.3X (still in alpha phase), where X means: the version with tracing enabled.

The primary purpose of the console is to display a list of tracing messages coming from Firebug as it runs. It's often tough to debug a debugger by another debugger and so, having the possibility to inspect logs is often really invaluable.

Notice that tracing-console is *not* the same as Firebug's Console panel. Console panel is intended to be used by web applications developers, while tracing console is for Firebug (or Firebug extension) developers.

So, move on if you want to see how it works...


There is bunch of various possibilities how to generate UI using Domplate (remember entire Firebug UI is generated using Domplate - i.e. content of all panels) and so here is another set of how to examples that is trying to reveal some other useful aspect and patterns. Of course, all examples can be explored using Domplate Runner again.

See all posts about Domplate here.

Enjoy! 😉


There is still lack of documentation for Domplate (even if there are already some articles) and so, I have decided to put together set of how to examples. I believe that this kind of simple and focused examples is good start for everybody who wants to understand how Domplate works and use it for building HTML UI.

Each example consists usually from following parts:

  • Domplate Script: the script used to describe Domplate template
  • Input Data (object): input data for a dynamic template
  • CSS: set of CSS rules used by result DOM

Every example also contains a brief description and a Demo button that can be used to run the example with Domplate Runner and see/explore generated markup. Since the runner is based on Domplate, specifically on
JQuery Domplate Plugin (made by Christoph Dorn) and Domplate doesn't support other browsers yet, it runs only in Firefox. So, if you are not using Firefox, perhaps it's good time to install it now. 😉


I have been waiting for a long time to write about this. Since Bug 430155 (new nsHttpChannel interface to allow examination of HTTP data before it is passed to the channel's creator) is now fixed, it's possible to intercept HTTP traffic from within a Firefox extension!

This fix should be part of Firefox 3.0.4.

This possibility is crucial for Firebug (and also Adblock Plus and Firekeeper can benefit from it) as one of its features is showing a response of any HTTP request made by a page. Until now, Firebug has been using Firefox cache and XHR monitoring to retrieve the response and display it to the user. While this worked quite fine for XHR (it's not that hard to monitor XHR responses) there was a big issue with monitoring all the other network requests. The most visible problem was probably submit of an HTTP form using POST method (known as double-load problem).

In some cases, the HTTP response isn't cached (and don't forget that Firefox cache can be disabled entirely) and Firebug had to fire a second request in order to get the response again and show it to the user. Of course, this was a big problem for every server that executed any (e.g. database) related actions (these have been executed twice). Uff...

Finally, I could implement new and reliable cache within Firebug 1.3 based on nsITraceableChannel. So, Firebug can use it anytime the response-source is needed without an additional request, e.g. if the user wants to see a network response in Firebug's Net panel...

Check it out, I am recommending latest Firebug 1.3 from SVN and till the Firefox 3.0.3 isn't available you can download latest trunk build from here. Any comments truly appreciated!

For those who are more interested, I have written an example that demonstrates how the nsITraceableChannel can be used.


I have got quite a lot of valuable feedback since Firecookie 0.6 release and so, I have decided to create a fresh new version. Thanks to all who took their time and helped to improve this Firebug extension!

Download Firecookie 0.7 beta for testing here (0.7beta9). If you would find any problems please report it here. The extension should work with all versions of Firebug and Firefox.

If you are interested, read more about all new features (with bunch of screen-shots attached) or read release notes and see what bugs have been actually fixed.


Extending Prism

by Honza

I was playing with Prism recently, exploring how hard is to write an extension for it (the real motivation was actually to adapt my existing extension). It turned out to be quite easy process and since I haven't found a tutorial (even if there are some wiki pages here and here) how to write a first Prism extension, I decided to put one on my blog.

So, take a look at Hello Prism! 😉


Next Page »