[jQuery] demo: hooking jQuery.ajax() in to Firebug Lite

[Stephan Beal]

Hi, all!

A few days ago i came across:

http://getfirebug.com/lite.html

which is every bit as cool as jQuery itself (which places it in the
top 5 bits of JS code on the planet). On their site they have a link
which embeds firebug lite into the current web page. i had to hack on
it a bit to make it work for me, and i wanted to share the results in
case anyone else out there can get some use out of it:

There's a demo of it here:

http://wanderinghorse.net/computing/javascript/jquery/jqapp/demo.html

See the "Load Firebug Lite" button, but it only works if Firebug is
*not* running for the current page.

The code (not pure jquery - a quick hack of code i grabbed from
getfirebug.com) is below, but first some comments:

- The jqApp.message() stuff is of course specific to my app, but i've
left it here because it demonstrates what's going on.

- This demonstrates how to hook in jQuery.ajax() calls to firebug's
XHR tracking.

- The code:


function load_firebug_lite()
{
    jqApp.message("Attempting to load Firebug Lite...");
    if(! ('firebug' in this) )
    {
        jqApp.message("Attempting to load Firebug Lite...");
        var fb=document.createElement('script');
        fb.setAttribute('src','jqApp/imports/firebug-lite-
compressed.js');
        document.body.appendChild(fb);
    }
    else
    {
        jqApp.message("Firebug Lite already loaded");
        return;
    }
    var count = 0;
    (function(){
        if(('firebug' in this) && (firebug.version))
        {
            jqApp.message("Initializing Firebug Lite!");
            var factory = jQuery.ajaxSettings.xhr;
            jQuery.ajaxSettings.xhr = function()
            {
                var x = factory();
                firebug.watchXHR( x );
                return x;
            };
            firebug.env.height = 250;
            firebug.init();
            jqApp.message("Loaded Firebug Lite!");
        }
        else
        {
            if( ++count < 10 )
            {
                jqApp.message("Waiting on Firebug Lite...");
                setTimeout(arguments.callee,500);
            }
            else
            {
                jqApp.message("Giving up waiting on Firebug Lite...");
            }
        }
    })();
};

If one spends 4 minutes hacking on it, the code can certainly be cut
in half by using jQuery instead of the DOM API.


It can be used like:

<input type='button' onclick="load_firebug_lite(); return false;"
title='Load Firebug Lite' value='Load Firebug Lite'></input>


Happy hacking!