Load jQuery in a Firebug session.

When debugging or poking around in sites where jQuery is not already used, I had been pasting the following code into the multi-line FireBug console and hitting Run. This makes jQuery available for debugging, etc.

j=document.createElement("SCRIPT");
j.src="http://code.jquery.com/jquery-latest.pack.js";
document.getElementsByTagName("HEAD")[0].appendChild(j);

If you use Firebug, this is a handy way to make it even more powerful.

Make it a bookmarklet.

Of course, that whole process got old fast, so I created a bookmarklet to do the same thing, but save me from having to paste and run it in Firebug.

Drag this link: Load jQuery to your Firefox bookmark toolbar, then just click it to inject jQuery into a page.

The bookmarklet code:

javascript:void((function(){j=document.createElement("SCRIPT"); j.src="http://code.jquery.com/jquery-latest.pack.js"; document.getElementsByTagName("HEAD")[0].appendChild(j);})())

And nicely formatted:

javascript:void((function(){
  j=document.createElement("SCRIPT");
  j.src="http://code.jquery.com/jquery-latest.pack.js";
  document.getElementsByTagName("HEAD")[0].appendChild(j);
})())

Then in Firebug, you can use jQuery selectors and so forth to debug the page. Obviously you’ll have to re-inject each time the page (or a new page) is loaded.

Great, I’ve reinvented the wheel.

Of course, a bit of searching revealed that John Resig himself posted a bookmarklet called jQuerify–almost identical to this one–linked in this Ajaxian article.

The bookmarklet envelopes are different, but both do a simple script injection into the DOM.