Unlike other top 5 lists that people put on their blogs, I actually really like and regularly use the five items on mine.

What’s a bookmarklet?

A bookmarlet is a piece of javascript that you store on your bookmark toolbar and will execute on your current page if you click on it.

Why are they great?

I love these bookmarklets because they save time or because they offer solutions for troubleshooting code on browser that don’t have firebug or IE developer toolbar. Over half were made by Paul Irish because as we all know, Paul is awesome.

To use any of the following Bookmarklets, drag the links up to your toolbar on your browser.

In no order of importance here are my top 5 Great Web Development Bookmarklets.

1. CSS Refresh: A great way to reload the freshest copies of the stylesheets without having to reload the whole page. This bookmarklet is great for all those times people decide to take the QA server down while you are debugging and just destroyed the css in Firebug. It’s also great if your page has slow load time and you want to see your changes immediately. [re: Paul's blog]
   CSS Refresh
2. New CSS Rule: This will let you add an entirely new CSS rule to the page. Click on it and an input menu will appear and then enter your new rule .foo{font-weight:bold;} It’s even great when you are trouble shooting with Firebug because you will be able to change elements all over the page instead of tacking on inline styles to just one part. Works in IE & FF. [re: Paul's blog again]
   New CSS Rule
3. Local<–>QA: This is awesome for when you are constantly going back and forth viewing the same page on QA and on your local. The code looks to see if the host of your current page == localhost, and if this is true then it will change it to qa.clientName.com, is host == localhost is false then it will change it to localhost. You will have to edit the code for your project, for example if your local isn’t called Localhost and whatever the URL of your QA site is. [RE: Paul]
   Here is the generic code:
   javascript:(function(){%20var%20loc%20=%20document.location;%20loc.href%20=%20loc.href.replace
(loc.host,loc.host.match(/localhost/)%20?%20'qa.server.com'%20:%20'localhost');%20})();
   Local<–>QA
4. Visual Event: Visually shows the elements on a page that have JavaScript events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages. [Re: Allen Jardine]
   The currently supported libraries are: 
   • jQuery 1.2.x
   • YUI 2.6.x (2.x might work!)
   • MooTools 1.2.x
   • Prototype 1.6.x
   • JAK (Events 2.2)

   Some limitations: This does not work in IE.
   Visual Event

5. Xray: Use it to see the box model for any element on any web page & it works on IE6+ & the good browsers! Since IE Dev Toolbar does not work on my computer without crashing it, I use Xray a lot. It doesn’t show you every CSS attribute there is attached to an element, but it shows you enough to trouble shoot some cross browser issues. [re: XRAY: For webdevelopers]
   
   Xray