Development Blog

Jetpack in Chromebug

I wanted to learn more about jetpack so (duh) I tried to debug a jetpack.  In case you’ve not heard,  jetpack is a Mozilla labs project to support easy, rapid development of Firefox addons using Javascript operating in an HTML rather than XUL world. You should try the tutorial, it really is easy and rapid!

Well, as long you don’t need to debug. Seems like the debug story is writing to Firebug’s Console.

Can we have a ‘jetbug’, a Firebug-like experience for jetpack? To start we’d need to understand what is jetpack. In part it is a Firefox extension: we should use Chromebug to investigate.

I ran the jetpack ‘boom’ tutorial from the about:jetpack URL. It is very short:

 html: "Boom<i>!</i>"

Then I inspected the “Boom” addition to the status bar:

In Chromebug we can see the implementation markup:

<statusbarpanel contextmenu="_child">
<iframe type="content" src="data:text/html,Boom%3Ci%3E!%3C/i%3E"
style="overflow: hidden; height: 16px; margin-top: 2px; margin-left: 4px; margin-right: 4px; width: 30px;">

So they put an iframe into the status bar to support HTML! Cool.

Next I want to find the Javascript above.  I did not get there yet, because Chromebug got confused by seeing a scope that was not a Window or BackstagePass. After some uh, logging based debugging of Chromebug, I can now see the Jetpack “Sandbox” object:

The console looks like an interface to Firebug. You can see the jetpack object used in the tutorial. Also in the sandbox is some jquery stuff and system functions.

Unfortunately there are ten other sandboxes whose role I don’t understand and I can’t find the source shown above. But it’s a start.  (Chromebug 1.6a3 will include what I’ve learned so far).


Followups on the newsgroup please.

Comments are closed.