[jQuery] demo: hooking jQuery.ajax() in to Firebug Lite
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!