Notas de un Peregrino Articulos varios sobre la web, mozilla y firebug

Firebug & Jetpack, make them work together

Lately I've been playing a lot with a new project from Mozilla Labs: Jetpack. I'll describe it briefly for those who don't know what this wonderful new project is, but you should check Jetpack's Site if you want to learn more about it.

If you ever wondered how all those Firefox extensions are made, you probably discovered (maybe with some disappointment) that they're not that easy to code. You have to learn a language called XUL for the UI, assimilate a lot of new terms like Overlays, XPI, XPcom... But hey, I'm not telling this stuff is impossible to grasp (in fact, there's a lot of documentation and tutorials available), just that you have to learn something new.
So Mozilla thought about that for a while, and came up with a pretty cool idea: you are most likely to allready know JavaScript, CSS and HTML. Why you should have to learn something new? And thus born Jetpack, a new way to code Add-Ons in just a single file and entirely coded in JavaScript, CSS and HTML.

Firebug and Jetpack

And what has Jetpack to do with Firebug? Well, pretty much. As stated on Jetpack's site, "not wanting to reinvent the wheel" they used Firebug for debugging and logging purposes. So for now everything's great: a simple way to develop add-ons, and a nice debugger... what else could I ask for?
Maybe for them to work together out of the box?

As some people has noticed, the latest versions of Firebug and Jetpack won't work together right after installing them. This is because the current version of Jetpack (0.6.2) uses an old API call to communicate with Firebug that changed in version 1.4.3. It seems that all the Firebug interaction was developed using Firebug 1.4.2, so they never noticed the change in the API. But don't panic! There is a way to fix this, and is as simple as changing a single word on a single file.

Making them play nice together again

Important Notice:
As I write this article the bug opened for this issue is already Verified and Fixed, so that means that the fix will be on the next Jetpack release. Meanwhile, you'll have to do the following patch by hand to use Jetpack with Firebug 1.4.3 or later.

First of all, you have to locate your Firefox profile. This depends on your system, but this are some of the most common locations:

• Linux:
  ~/.mozilla/firefox/<profile folder>

• Mac OS X:
  ~/Library/Mozilla/Firefox/Profiles/<profile folder>
  OR
  ~/Library/Application Support/Firefox/Profiles/<profile folder>

• Windows XP:
  C:\Documents and Settings\<Windows login/user name>\Application Data\Mozilla\Firefox\Profiles\<profile folder>

• Windows 7:
  C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile folder>

If you are using firefox 3.6, you can go to the address "about:support" and there's a link to your profile folder.

After finding your profile folder, you'll have to go to the following folder inside it.

extensions/jetpack@labs.mozilla.com/content/js/xul

and edit this file:

firebug-extension.js

Changing the line 19 from:

Firebug.URLSelector.watchBrowser(browser);

To:

Firebug.Activation.watchBrowser(browser);

Save that file, restart Firefox, and voilà, Firebug and Jetpack are working together now!

Testing if Firebug is now working

If you want to test if Firebug is working as expected, then paste the following into the develop area of Jetpack:

jetpack.future.import("menu");

jetpack.menu.context.page.add({
    label: "LogThis!",
    command: function(){
        console.log("Firebug is Working OK");
    }
});

Now hit the "Try out this code" button, enable Firebug and refresh the page. If everything went right, you should have a new entry on the context menu of the webpage, called "LogThis!". If you click on that entry and the text "Firebug is Working OK" appears on the console, you have it working.