How to debug Firefox extension

Question

I've been into Firefox extension development recently, and ran into some issues:

So, in browser.xul i defined these lines:

<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script src="jquery.js" />
    <script src="global.js" />
</overlay>

So, in global.js i have access to all jQuery stuff, and trying to load a simple script there:

var inner = null;
var o = function () {
    var prefManager = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
    return {
        init : function () {
            alert('here loading inner..');
            $.get('http://www.example.com/script.js', function(d) {
                alert('loaded inner script!');
                inner = d;
                gBrowser.addEventListener("load", function () {
                    alert('onload');
                }, false);
            }).error(function(e) { alert('error loading inner..'); setTimeout(o.init,1000); });
            $(this).ajaxError(function() { alert('ajaxError'); });
        }
    }
}
window.addEventListener("load", o.init, false);

But nor i receive a "loaded inner script", nor a "error loading inner" alert.. And i don't see the error console to log any errors from the extension... I assume the $.get is silently failing due to some restrictions maybe, but is there a proper way to debug the errors normally? The error console is silent for the extension, it only shows errors from the web pages

Solution 1

If you look at the article Setting up an extension development environment it suggests setting up some preferences, including javascript.options.showInConsole = true, which logs errors in chrome files to the Error Console.

Solution 2

In general it can be problematic using JQuery in a XUL page since it assumes that the document is an HTML DOM rather than an XML DOM and that the window is a HTML window rather than a XUL window. If I were you I'd use the subscript loader for this. To debug you can use Venkman although it is a bit flakey and I often resort to just dump() statements to the console instead.

Update: see my comment below about the Browser Toolbox.

Comments

[Alex K]

it seems the loadSubScript can't load external urls ("The URL pointing to the script to load. It must be a local chrome:, resource: or file: URL"), while i need to get it from example.com/myscript.js..

[Alex K]

ok this will be much better now, i'm going to try it with showInConsole and see what errors it shows

[Alex K]

it worked! i mean it helped :) much easier now, i replaced $.get with raw xmlhttprequest, and it's rolling now :) thanks :)

[balupton]

Is there any way to get debugging with breakpoints? An error console is as useful as a mule on drugs. (but yes, still better than nothing)

[Mike Demenok]

Since FF19 you can use built-in debugging tools on the browser chrome itself, see this answer for detail: stackoverflow.com/questions/17547364/…

[NoBugs]

Venkman isn't as stable/usable as the built in Browser Debugger now included in Firefox now.

[Matthew Gertner]

Yeah this whole question is out of date now. You should post a new answer about the Browser Toolbox (formerly Browser Debugger) which I agree is a great new innovation (it's been around for less than a year and is getting stabler with every release).