Useful Web Developer Bookmarklets

Bookmarklets to make web developers lives easier

Share this story:

Bookmarklets are small web apps, usually written in Javascript. They can load the applet on top of, or using data from the website you are currently viewing. This makes for good developer bookmarklets that can display and analyse information for a website or page you are currently developing or picking apart.

XRAY - This can bring up the box model and information of any element on the page. It shows dimensions, positioning, paddings, margins etc. Very useful for quickly determining the aspects of a page design.

View Cookies - Does exactly what it says on the tin, shows any cookies stored by your browser.

SpriteMe - Parses your HTML + CSS and suggests a list of images that you should have as sprites. Also able to generate and export a sprite for you. Good for making a website load more efficiently.

Firebug Lite - Firebug is an awesome development tool, but only works in Firefox. They have created a lite version now available for any browser with the use of bookmarklets!

Color List - Analyses your page and detects all foreground and background colours used. Shows a swatch of colours, RGB and hex values.

Design Grid - Pops up a toolbar when you can enable / configure / disable a grid, rules, unit counters, and a crosshair to show your cursors current coordinates (x + y).

W3C HTML / W3C CSS - Widely used validation web apps for HTML and CSS code.

TinyURL - Creates a minified URL of the page you are currently viewing.

Please feel free to add anymore useful bookmarklets to the comments!