30 September 2010

Use jQuery in Firebug

Firebug rocks! It lets you inspect HTML, change CSS, and debug javascript—
plus, it’s a great way to noodle around on a page you’re developing or some random page on the web. Now and again I find myself in the Firebug console, wishing that
jQuery was at my disposal, e.g., I want to manipulate the page in some way or print out a list of page content into the console (easy manipulation of data + copy and paste).

Normally you can’t do this unless the page is already using jQuery… unless you have a nifty bookmarklet that will add it to the page for you:

Here’s the bookmarklet Add jQuery Install it by dragging it to your bookmarks toolbar.

And here’s the code—pretty simple:

javascript:(function(url) {
 var s = document.createElement('script');
 s.src = url;
 (document.getElementsByTagName('head')[0] ||
  document.getElementsByTagName('body')[0]).appendChild(s);
})('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js')

This will work for any javascript console, and you can easily change the url at the end of the code snippet to be any script you want. Enjoy!

Now if I could just get Firebug to never crash Firefox…

Note: if you try to reference `$` from the Firebug console before loading jQuery onto a page, then it returns a function from within the Firebug code that’s just a wrapper around `document.getElementById`. Once you add jQuery to your page, you’ll only be able to reference it from the console as `jQuery`, since the other `$` now exists inside the scope of the console. On the other hand, if you load jQuery first, `$` should work as the jQuery object within the console.

Comments (2)

1. Dan wrote:
<p> I love Firebug, pretty cool blog, I&#39;ll be back for sure. </p> <p> Off topic but what development environment are you using at hunch? Rails? </p> <p> I am running PHP with the CodeIgniter framework but thinking about switching. </p>

Posted on 20 October 2010 at 6:10 PM  |  permalink

2. peter wrote:
<p> Hunch is mainly Python, using Django and some other custom stuff. This blog is using Django too: http://mrcoles.com/blog/mrcolescom-launches-again/ </p>

Posted on 20 October 2010 at 11:10 PM  |  permalink

Peter Coles

Peter Coles

is a software engineer who lives in NYC, works at Ringly, and blogs here.
More about Peter »

github · soundcloud · @lethys · rss

It’s time to get big money out of politics. Join the kick-started campaign to put government back in the hands of the people. Pledge mayday.us now