Web Development Bookmarklets

I’m a big fan of Firebug. I believe that if you do any kind of web development, that’s the one Firefox extension you NEED to have on your computer. It is simply indispensable and I miss it greatly when I need to debug code on IE or another browser. Or at least I used to miss it, until they came out with Firebug Lite.

What is Firebug Lite? It is a bookmarklet which loads up almost fully functional copy of Firebug into the browser. It is not perfect, and definitely not as flexible as the real thing, but it has one big advantage. I can use it to debug persistent Javascript errors in IE with little hassle. It is really a life saver – what used to take a lot of guess work, and cursing under one’s breath now can be resolved in mere seconds using this bookmarklet.

While Firebug is pretty much ultimate web development tool there are quite a few other useful bookmarklets (or favelets) out there. I wanted to take this time, to discuss few of my favorites. All the links below lead to homepages, not the bookmarklets themselves so don’t drag them to your toolbar.

1. Squarefree Bookmarklets

   Not one, not two but 23 useful bookmarklets. Most work in Firefox, some also work in Opera and IE. Few of them duplicate functionality of Firebug most some offer some interesting functionality. There is one bookmarklet that lists all the defined classes on the page, another displays all javascript variables and user defined functions, others show borders of elements, nesting levels and etc. All in all, very useful set of tools.

2. XRAY

   Great little bookmarklet which pretty much does the same thing as the “inspect” feature of Firebug. It allows you to click on a HTML element and will display wealth of information about it. Among other things it will tell you the element type, class, id, the exact inheritance path (ie. all of it’s respective parents up to the html element) and all the most important css attributes such as border, margins, padding, height, width, float and etc.. The inheritance path is clickable so you can easily see the properties of all the parents.

3. ReCSS

   Reloads the CSS for the page without reloading the page. That’s it! Simple, yet brilliant. Works great with pages that take a little bit of time to load, or use Ajax to dynamically load a lot of content and need to recombibulate themselves from scratch after you hit refresh.

4. Design

   Can overlay an interactive grid or a ruler over your page to help you estimate relative measurements of HTML elements. It also has a feature that allows you to click-and-drag your mouse and displays the size of the covered area in pixels. Takes out a lot of guesswork when trying to get the margins or padding “just right” for a given layout.

5. WTFramework

   Displays the name and version number of the Javascript framework used to create a given page. Saves you from digging in source code in order to make sure a site in question is using the newest release of jQuery. It supports most of the big frameworks out there (jQuery, YUI, MooTools, Dojo, Sciptaculous, Moochkit and etc..).

6. Layout Grid

   Similar to the design bookmarklet, but much simpler. Instead of using an overlay to display a grid, this tool “injects” a layout grid as a background image for your page. This way all the top level elements remain clickable, and accessible. Works well with other bookmarklets such as XRAY.

7. Slayer Office Favelet Suite

   Very comprehensive compilation of tools rolled into a single bookmarklet. It has couple of features not found in any other bookmarklets or in Firebug – for example the ability to view HTML headers of the current page. It also has some fairly standard tools such as DOM overlay, a ruler (similar to that from Design) and bunch of other stuff. Highly recommended.

That’s all I have for today. These are the things I’ve been using lately while hacking together webpages and testing them in various browsers. What are your favorite bookmarklets? Did I miss any important, life changing Favelet tools here? Let me know in the comments.