When developing a UI for your web application, it’s easy to lose a lot of time waiting for reloads, dealing with browser quirks, even just trying to identify a particular element in the DOM. Here are five handy bookmarklets that will help you finish your client-side web development faster and more effectively.
ReCSS makes testing out CSS hacks easy. When you alter your CSS in an editor and save the new stylesheet, you have to reload the entire page in your browser to see the effect of the changes. Sure, you can make the edits in Firebug, but Firebug’s inbuilt editor isn’t great for much beyond the slight tweak. With AJAX-powered pages and dynamic state, reloading the page isn’t quite as simple as it sounds.
Enter ReCSS: this handy little bookmarklet will keep your existing page entirely intact, but reload all the CSS sheets. You may see a brief flash of white in your browser as current styles are removed, before your page renders almost immediately with the latest set of CSS rules. Check out the project page.
2. Layout Grid Bookmarklet
Working out pixels and laying out a page is tricky, especially when working from detailed Photoshop mockups and sketches. After some suggestions from the community about using a background image of a grid for layout, Andy Budd created the Layout Grid Bookmarklet, which creates a drawing-paper style grid against the background of your page to generally measure elements with. Check out his blog post about it and the Layout Grid Bookmarklet.
X-RAY is a great Firebug/Safari/IE Dev-bar style inspector for web pages. It features a simple point-and-click interface, revealing some basic CSS properties and inheritance hierarchy of the selected element, as well as outlining it and displaying dimensions details. The actual interface is quite slick, and hides away neatly when you no longer want it. If you aren’t at your preferred Firebug-equipped machine, XRAY is definitely something to have on hand. Check out the project page and the XRAY bookmarklet.
Aardvark is similar to XRAY, but provides a lot more functionality for traversing the DOM visually. Ever wanted to pick a particular element, then see what happens if you move up n levels, go to the next node across, or even dive in and start editing innerHTML there and then? Aardvark provides a point-and-click interface similar to XRAY, and then a set of keyboard shortcuts for moving around, focusing on finding what you need. Aardvark is actually available as a Firefox extension, although the bookmarklet is quite convenient. Head to the project page and try the Aardvark bookmarklet.
5. Slayeroffice Favelet Suite
We’ve saved the best till last – this favelet suite will blow you away. It features everything from DOM charts to mouseover inspectors, color lists to font resizers, rulers and even a hidden field modifier. All in all, this collection of 15 utilities all in the one bookmarklet is a must for any front-end web development. While it was last revised in 2004, it in many ways offers far more functionality than Firebug, with far more detail provided by its various tools. When you’ve finished with it it, just hit escape to quietly hide it away. Head to the project page and grab the Favelet suite.