Bookmarklets can be powerful aids for web development. With jQuery providing so much innovation in the browser landscape, many bookmarklets are pushing the bar. Here are some interesting ones that I’ve found incredibly useful and use in conjunction with (or absence of) the built-in browser developer tools.

• jQuerify is a simple way to inject the jQuery framework into any website and enable immediate DOM manipulation. To try it out, just drag this link to your bookmark list. Depending on the browser you’re using, you can then enter any javascript commands via the console window in Firebug, IE 8 Developer Tools, or Chrome Developer Tools.

  

  If the website you are visiting already has jQuery installed, the bookmarklet will not inject the framework again.

  

  Here is some sample jQuery code which would highlight a post in red, the blog entry in blue, and perform some simple animation to the sidebar on this website. Click here to see it in action.

  $("div[class=post]:first").css("border", "2px solid red");
  $("div[class=entry]:first").css("border", "2px solid blue");
  $("div[class=sidebg]").slideToggle(4000).fadeIn("fast");

• Firebug Lite is another useful bookmarklet if you’re currently using a browser that doesn’t support plugins or have its own set of developer tools. It has support for both online and offline integration. Click here to see an example or simply drag and drop this link into your bookmarks.

  

  You can now enter commands into the console and manipulate the DOM just like you were using an assisted native browser extension. Enjoy!

Do you have any great developer bookmarklets that you’d like to share? Please comment!

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website