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.
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.
- Squarefree Bookmarklets
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.
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.
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.
- 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.
- 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.