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.

This entry was posted in programming and tagged . Bookmark the permalink.



5 Responses to Web Development Bookmarklets

  1. IceBrain PORTUGAL Mozilla Firefox Debian GNU/Linux Terminalist says:

    I don’t really know any good bookmarklets, but this are great! *bookmarked*

    Reply  |  Quote
  2. Victoria UKRAINE Mozilla Firefox Mac OS says:

    Firebug rules! Its creator deserves a monument :)

    I use it in conjunction with Web Developer extension (when I was at WJS’08 in Atlanta, I even de-lurked and came to shake Chris Pederick’s hand and thank him for saving my sanity or what’s left of it :) )

    Thanks for mentioning 1, 3 and 7, never heard of them, have to try immediately.

    Reply  |  Quote
  3. Luke Maciak UNITED STATES Mozilla Firefox Windows Terminalist says:

    @Victoria: Firebug – saving sanity of web developers across the world since January 2006. :P

    Reply  |  Quote
  4. John UNITED STATES Safari Mac OS says:

    For what its worth, the slayeroffice favelet suite and the squarefree bookmarklets were the inventors of many of what you refer to as “standard” tools that are implemented in Firebug and the Web Developer Toolbar – most notably the floating DOM inspector tool, which was originally released by slayeroffice in 2004, soon to be followed by tools like XRAY and Aardvark.

    Just a bit of history for you :)

    Reply  |  Quote
  5. JuEeHa FINLAND Mozilla Firefox Mac OS says:

    I use personally javascript:void(location.href=’http://classic-web.archive.org/web/*/’+ location.href) and javascript:void(location.href=’http://classic-web.archive.org/web/*/’+ prompt(‘URL:’)) the most, but I also have Google Translate bookmarklet

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>