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.
We have decided to extend cooperation between Firebug and Firefox dev-tools teams (I am a member of both) and so, discussed this topic about four weeks ago at our meeting in London.
We agreed that we want to have an effective and synchronized strategy when working on in-browser developer tools. One pillar of the plan is sharing APIs, components, modules, code maintenance, etc. to avoid duplicate development effort.
The first step is sharing an independent HTTP tracking component that is based on Firebug's Net panel and can be shared among all tools that want to intercept an analyze HTTP traffic. Firebug and (built-in tools in) Firefox will be its first clients.
So take a look at what we have managed to implement and demonstrate for our Toronto meeting last week.
I had a chance to attend MozCamp CZ 2012 that happened in Brno last Saturday. It was one day meeting filled with sessions and discussions about Mozilla related stuff.
I had also great opportunity to lead a session about Firebug Tips & Tricks where I also mentioned some useful Firebug extensions. Check out my slides (en-US), but I am not sure how useful they are without me talking 😉
We discussed many interesting topics and here is a brief summary of what stuck in my memory.
If it sounds interesting to you, you should join us the next time! Follow Mozilla.cz to know when the next MozCamp CZ happens.
Photos provided by Jan Horák (Red Hat)
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.
If you are a web designer or if you are at least dealing with fonts time to time, this neat feature should come in handy.
The feature is implemented by FireFontFamily, which is a Firebug extension created by Heather Arthur (also a member of the devtools team). So, you need to install it first if you are interested.
Update: this feature is integrated with Firebug 1.10
Simple feature description:
Highlights the rendered font-family from the list of font-families for a CSS 'font' or 'font-family' property in Firebug's CSS panel.
See all Firebug tips
And couple of explanatory screenshots. The first one shows the Style side panel when FireFontFamily extension is not installed.
The other one shows the same when FireFontFamily is installed.
See that highlighted font, it's the one actually rendered.
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!
I have recently spent some time hunting down memory leaks in Firebug and the most successful way I have found so far has been analyzing CC (Cycle Collector) object graph - graph of objects that are cycle collected.
The particular memory leak I have been looking for is called a zombie compartment. In my case, there is a document living in the memory even if the parent tab has been closed long time ago. Something is still referencing that document object so, it can't be released. The goal here is usually to find that referent. And this is when the CC heap debugging comes to rescue.
The rest of this post describes my extension CCDump that allows to dynamically analyze CC object graph.
Read more...
The Persist feature has been available in Firebug for some time already, but I recently got several questions indicating that it doesn't have the visibility it deserves. So, let's introduce it quickly.
Firebug UI resets every time the current browser tab is refreshed or navigated to another page - to show the new state. The consequence is that all Firebug panels trash the content (i.e. the Net or Console panel entries are lost).
This is fine since usually the user doesn't want to keep the entire history. But what in the case when you want to debug the transition process between page loads or redirects?
And this is exactly when the Persist button becomes practical...
See all Firebug tips
Firebug 1.8b3 introduces a new API that can be used to create time-stamps during Javascript execution and compare them together with HTTP traffic timing on the timeline in the Net panel: console.timeStamp();
This feature is useful in cases where the developer needs to know when particular piece of Javascript code is executed relatively to the HTTP request made by web page. Especially in cases when Javascript is loaded through dynamically appended <script> tags or through XHR and evaluated using eval().
See the following screenshot that shows a time-stamp generated during a page load.
The time stamp is also displayed in the Console panel so, you can compare with other logs.
The rest of this post demonstrates this feature on couple of live examples in detail. So, if you are interested what you can do with Firebug 1.8, read further!
Another Firebug feature that would deserve more attention is re-run (introduced here). This neat feature represented by a simple button on Script panel toolbar allows re-execution of the current call-stack you are halted on in the debugger. This helps especially in cases where it's hard to reproduce an action in the UI in order to execute specific Javascript function implemented on a page.
Of course, this button is only available when you are stopped at a breakpoint.
Lets go through real example step by step.
See all Firebug tips
