jQuery For Firebug

March 5th, 2008 by bill · 5 Comments

»A Javascript bookmarklet that loads jQuery on-the-fly for Firebug debugging (or snooping) of sites where jQuery is not in use.

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.

Tags: Javascript · Programming

5 responses so far ↓

1 Trevor // Aug 13, 2009 at 12:49 am

This is great! Thanks for whipping the bookmarklet together.
2 Usando jQuery no console do firebug // Jan 7, 2010 at 11:58 am

[...] em inglês: http://techrageo.us/2008/03/05/jquery-for-firebug/ Uma alternativa praticamente igual: [...]
3 Sten Hougaard // Mar 11, 2010 at 4:07 am

Hi,
I love it – it is a “one-liner” tool which can be used anywhere. I have combined it with another boomarklet so that you will get a textarea in which you can execute javascript – I use it a lot here it is:
javascript:void(eval(“try {k=$} catch(e) {j=document.createElement(‘SCRIPT’);j.src=’http://code.jquery.com/jquery-latest.pack.js’;document.getElementsByTagName(‘HEAD’)[0].appendChild(j);};var s = ‘function doEval(s) { opener.eval(s); }’;s+=”;window.w = window.open(”,”,’width=700,height=210′);window['w'].document.write(s);window['w'].document.title=’Debug window’”))

Cheers!

/Sten Hougaard
4 Sten Hougaard // Mar 11, 2010 at 4:10 am

Hi again,
Oh – I see that the blog software have changed some chars so that copy’n'pasting my bookmarklet might lead to not-working script – I have uploaded it here: http://www.netsi.dk/addJQueryAndOpenEVALWindow.txt

/Sten Hougaard
5 links for 2010-03-17 | Digitalistic - Mashup or die trying // Mar 17, 2010 at 9:05 am

[...] jQuery For Firebug (tags: jquery js javascript debugging firebug firefox selector) AKPC_IDS += "414,";Popularity: unranked [?] [...]