jQuerify & Console (Webkit-Inspector)

About a year ago I switched from using firefox as my main browser to chrome. I of course still test things across the board – I may even do a post about cross browser testing somtime. Anyway, I wanted to showcase a useful chrome plugin that I use a good deal called jQuerify. It just adds jQuery to the current page in chrome. This can come in handy when your taking over someone else’s project, or debugging your own. It’s important to note that the webkit-inspector console allows you to write javascript on the fly, so by adding jQuery to the page we can write jQuery code on the fly in-browser.

Here is a video of me messing around with jQuerify. WARNING: it’s a little strange, I just had a few snippets handy and sort of made things up as I went along. If you’re already familiar with jQuerify you can just skip to somewhere around 3:45…

This is the code snippet I used at the end:

1
2
3
4
5

$("body").css("background-color", "black"); 
$("a").css("color", "white !important"); 
$("#hplogo").attr("src", "http://jzerr.com/zoogle.gif"); 
$("div").css("background-image", 
"url(http://bestanimations.com/military/Explosions/Explode-05-june.gif)");

I also used the Chrome Color Picker plugin which just wraps the jQuery Color Picker plug-in. I actually made some updates to that jQuery plug-in… maybe I’ll post about that soon…

UPDATE

David pointed out in the commends that jQuirify uses jQuery 1.4.2. So I decided to tweak the extension for chrome, here is how to do it:

1) Install jQuirify
1) go to :

/Users/USER NAME/Library/Application Support/Google/
Chrome/Default/Extensions/
gbmifchmngifmadobkcpijhhldeeelkc/1.2.0_0/content.js

3) change line 56 of content.js to : script.src=”http://code.jquery.com/jquery-latest.min.js”;

Now jQuirify will alway use the latest version of jQuery. To make sure that its working you can do this in the console:

$().jquery

At the time of this post you should get back “1.4.4”

This entry was posted on Friday, January 21st, 2011 and is filed under chrome, javascript, jquery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.