I have been recently working on an extension (code name HTTP Monitor) that can be used to intercept HTTP traffic of a browser tab. The extension is based on Firebug's Net panel and is on its way to be embedded in Firefox by default.
This post explains how to use HTTP monitor to intercept HTTP traffic on mobile with Fennec (Firefox for Android) installed.
Firebug 1.10 introduces new API for building extensions based on Asynchronous Module Definition (AMD) syntax. Firebug itself is already using AMD to improve its internal structure and modularization of the code base.
The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
One reason why Firebug uses AMD syntax is to support module sharing between Firebug and Firebug Lite. This post explains how to build Firebug extension based on AMD.
Entire Firebug source base has been moved on github.com last week and we are also adopting a new GIT development workflow. So far, everyone has been truly excited by this change and I believe that it's also much better way how to collaborate with other coders. Firebug is an open source project after all.
So, for those who are interested at forking Firebug repository, issuing a pull request, developing Firebug extension, etc. here are some basic things to know before you start.
There are already several repositories in Firebug's account, but the one you are probably interested the most is firebug
https://github.com/firebug/firebug
The structure of the repo is following:
Here is how to clone the repository (read only):
The extension directory contains Firebug extension files and so, you can run Firebug off of it. It's also the best way how to quickly check your code changes.
extensions/ folder, create if it doesn't exist.C:\firebug\extension\ or ~/firebug/extension/). Windows users should retain the OS' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.firebug@software.joehewitt.comNow you can modify the code base, restart Firefox (with Firebug extension installed) and see your changes live.
You probably don't need this that often, but you can also easily build Firebug XPI package. All you need is Apache Ant installed on your machine.
The result XPI file should be located in ./release directory.
And now the most interesting part. You fixed a bug or implemented new API you need in your extension and you want us to pull your changes, commit into Firebug master branch and release! Let's see what you need to do.
Update: it's useful to create a separate branch for every contribution you make. (related to #4 and #5)
Our release cycle is quick (a release at least every other week) so, your changes can be publicly available pretty soon!
If you don't like github.com from some reason you can always create read-only clone (see at the beginning of this post), make your changes and generate a patch:
... or using svn:
Finally, create a new issue report (Firebug official issue list is still at the same location) and attach your patch. Again, we'll review your changes and accept if all is OK!
A lot is happening these days and I bet you already know about Firefox 4 + Firebug 1.7 releases. You might also seen some of the new features introduced in Firebug 1.7 and so, I won't repeat that.
I'd like to focus on changes related to page load process and script execution in Firefox 4. Apart from many performance improvements script execution changed to be more HTML5 compliant and Firebug is an excellent tool that can be used to analyze & understand what is going on under the hood.
Thanks to Henri Sivonen for his excellent post about Script Execution Changes in Firefox 4 that served as the main source of information for me!
Firebug 1.7 (currently beta 1 available) improves API related to Infotips. These Infotips are used in Firebug UI for displaying additional information.
They are similar to tooltips but can provide a richer content (comparing to those in HTML). The content doesn't have to be only a text but any HTML. In fact, the content is usually generated using Domplate.
Let's see how to utilize these Infotips in Firebug extensions.
First, see how infotips actually look like. Since they are implemented in HTML and Firebug uses HTML only for panel content (so far) they appear in panels.
The first image comes from the Script panel. The mouse is hovering over a variable and the infotip shows its value.
The next infotip is displayed within the Net panel. It shows detailed timing info for selected (note the gray background) HTTP request entry.
And the last example shows preview of an image when the user hovers mouse over a CSS property with background URL.
Another feature introduced in Firebug 1.6a11 is support for back and forward navigation. This well known pattern used in all web browsers to navigate among visited web pages turned out to be quite useful for Firebug too.
See how the related UI looks like.
As expected, there are two buttons: Back and Forward, these are used to move within the history of visited Firebug panels. Right click on these buttons opens a pop-up menu with recent history entries.
In this particular case (on the screenshot), the history shows that Cookies, Net and Script panels have been recently visited. So, by pressing back at this moment, the user would be navigated to the previously selected panel - Cookies. It doesn't matter that the panel actually comes from a Firebug extension.
By pressing forward, the user would be navigated into the Script panel (again, using the screenshot example). In this case there are two history entries, since the Script panel was used to display two script files in the past.
Tracking also selected files within a panel (this applies on the Script and CSS panels) is very useful feature. Instead of using the Script Location Menu again and again to pick the target script file (pretty tiring if there is a lots of scripts on the page), the user can just press back or use the history menu to navigate faster to already visited scripts. And yes, the scroll position within the script is also tracked so, you'll end up seeing the same piece of source code as before.
The same feature is now available also in Chromebug (since it's based on Firebug code base) and very useful for navigation among chrome script files.
This post is updated to reflect changes in the specification. You need Firebug 1.6X.0a12
Firebug 1.6X.0a12 implements a new console.table method that allows output of tabular data into the Console panel. This feature was suggested by Patrick Mueller who works on webkit based on a similar feature implemented in FirePHP by Christoph Dorn.
Before diving into various scenarios and details how to use this new method, let's see a simple preview of a tabular output.
This table corresponds to a following code:
I had a chance to take a closer look at a new (and I believe the first one!) book about Firebug, written by Chandan Luthra and Deepak Mittal. This book focuses on Firebug 1.5, which is the current release on AMO.
Arm yourself to destroy UI and JavaScript bugs.
After a brief introduction to Firebug and its history, the authors provide excellent and detailed description of all Firebug features (panel by panel) and so, the first half of the book represents a comprehensive reference guide for those who don't want to miss any tiny thing (gosh, I would love to have such info somehow directly accessible from within the FB UI).
The target audience is front-end web developers who are building software and pages using HTML, CSS, JavaScript, and AJAX, and want to learn Firebug. The book assumes that the reader has a very basic knowledge of HTML, JavaScript, and CSS. The examples in the book can be understood by someone who has just been introduced to web development.
The second half of the book was exciting for me. It starts with web page performance tuning and continues with description how to use Firebug for AJAX development. The last two chapters of this book are dedicated to Firebug extensions. You can find a list of some useful extensions as well as a great chapter about developing an extension of Firebug (including famous "Hello World!" example).
I think that there could have been more about how to effectively use Firebug in order to solve typical scenarios/issues, which developers meet in their daily work (improving download speed, profiling application logic, fixing design related bugs, learning unknown code & markup, etc) apart from listing all features.
Anyway, I highly recommend this book to everyone who is looking for complete and transparent overview of all Firebug features nicely explained and categorized. The book is worth reading!
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 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:
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.
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.
