Awesome 32 Bookmarklets for Web Developers and Designers

All of these bookmarklets/favelets will be useful to all web designers and developers, they are the quickest method for testing, analyzing and tweaking any web page.

A Bookmarklet or Favelet is a small application tool, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page.
To use these bookmarklets you can drag and drop the links to your Bookmark Toolbar or right click and save link as, this way you will always have quick access to these great tools

Layout Grid and Overlay Bookmarklets

Bookmarklet : Layout Grid Bookmarklet (Drag & Drop this link to your toolbar)
Description: This bookmarklet simply applies a layout grid image to the body of a page.
Bookmarklet : Layout Grid Overlay (Drag & Drop this link to your toolbar)
Description: This bookmarklet creates a div, positions it absolutely and then applies the background image to the div.
Via : Andy Budd.

Bookmarklet Javascript Code (Copy and Paste) :

javascript:void(d=document);void(el=d.getElementsByTagName('body'));void(el%5B0%5D.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');

MRI from WESTCIV

Bookmarklet : MRI Bookmarklet (Drag & Drop this link to your toolbar)
Description: MRI is a free cross browser tool that lets you test selectors with any web page.
Via : WESTCIV.

Bookmarklet Javascript Code :

javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript('http://westciv.com/mri/theMRI.js');

Spry Medias Design Bookmarklet

Bookmarklet : Design Bookmarklet (Drag & Drop this link to your toolbar)
Compatabile Browser(s) : Safari, Firefox, Netscape, Opera and Internet Explorer 7.
Description: Design is a suite of web-design and development assisted tools which can be utilized on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
The Features :
Grid – overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.
Rule – displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.
Unit – allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.
Crosshair – draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.
Via : Spry Media.

Bookmarklet Javascript Code :

javascript:function%20fnStartDesign(sUrl)%20{var%20nScript%20=%20document.createElement('script');nScript.setAttribute('language','JavaScript');nScript.setAttribute('src',sUrl);document.body.appendChild(nScript);}fnStartDesign('http://www.sprymedia.co.uk/design/design/media/js/design-loader.js');

Quick Accessibility Page Tester

Bookmarklet : Accessible Page? (Drag & Drop this link to your toolbar)
Description: It highlights definite issues with your page, warns about possible issues and also highlights areas on the page that might benefit you.
Via : Accessify.

Bookmarklet Javascript Code :

javascript:function%20loadScript(scriptURL){var%20scriptElem=document.createElement('SCRIPT');scriptElem.setAttribute('src',scriptURL);scriptElem.setAttribute('type','text/javascript');document.body.appendChild(scriptElem);}loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js');loadScript('http://accessify.com/_scripts/favelets/accessify-page-test.js');

Reload CSS

Bookmarklet : Reload CSS (Drag & Drop this link to your toolbar)
Description: Reload CSS refreshes only the CSS of a loaded page every 2 seconds so you can use your CSS editor of choice and see semi-real-time changes in your browser when you save.
Via : MrClay.org.

Bookmarklet Javascript Code :

/* 

Slayer Office Mouseover DOM Inspector (Domi)

Bookmarklet : Mouseover DOM Inspector (Domi) (Drag & Drop this link to your toolbar)
Compatabile Browser(s) : Safari, Firefox, Netscape, Opera and Internet Explorer 6+.
Description: DOMI allows you to view and manipulate the DOM of a web page simply by mousing around the document.
Via : Slayer Office.

Bookmarklet Javascript Code :

javascript:prefFile='';void(z=document.body.appendChild(document.createElement('script')));void(z.language='javascript');void(z.type='text/javascript');void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');void(z.id='modi');

Slayer Office Favelet Suite

Bookmarklet : Favelet Suite (Drag & Drop this link to your toolbar)
Compatabile Browser(s) : Safari, Firefox and Internet Explorer 6+.
Description: When invoked, a div element will appear in the top left corner of your browser window with a list of the following bookmarklets : Color List ; Document Tree Chart ; HTML Attribute Viewer ; HTTP Header Viewer ; Hidden Field Modifier ; Javascript Object Tree ; MODIv2 ; Mouseover DOM Inspector ; Object Dimensions ; Page Info ; Remove Children ; Resize Fonts ; Ruler ; Show Source ; Style Sheet Tweak ; Style Sheet Viewer.
Via : Slayer Office.

Bookmarklet Javascript Code :

javascript:s=document.body.appendChild(document.createElement('script'));s.id='fs';s.language='javascript';void(s.src='http://slayeroffice.com/tools/suite/suite.js');

Wave – Web Accesibilty

Bookmarklet : Wave – Web Accesibilty (Drag & Drop this link to your toolbar)
Description: WAVE is a free web accessibility evaluation tool, rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility information within your page.
Via : WEBAIM.

Bookmarklet Javascript Code :

javascript:void(window.open('http://wave.webaim.org/report?url='+escape(window.location)))

XRAY: Look Beneath the Skin

Bookmarklet : XRAY (Drag & Drop this link to your toolbar)
Compatabile Browser(s) : Safari, Firefox and Internet Explorer 6+.
Description: XRAY is a cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.
Via : WESTCIV.

Bookmarklet Javascript Code :

javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript('http://westciv.com/xray/thexray.js');

Resize Browser Size

Select Browser Size

240px X 320px (Drag & Drop this link to your toolbar)

480px X 640px (Drag & Drop this link to your toolbar)

640px X 480px (Drag & Drop this link to your toolbar)

800px X 600px (Drag & Drop this link to your toolbar)

1024px X 768px (Drag & Drop this link to your toolbar)

1280px X 768 (Drag & Drop this link to your toolbar)

1600px X 1024 (Drag & Drop this link to your toolbar)

Validators and Checkers

W3C Validate HTML

W3C Validate HTML (Drag & Drop this link to your toolbar)

W3C Validate CSS

W3C Validate CSS (Drag & Drop this link to your toolbar)

Quick Validate HTML (avoids “missing doctype” and “missing charset” errors)

Quick Validate HTML (Drag & Drop this link to your toolbar)

W3C Link Checker

W3C Link Checker (Drag & Drop this link to your toolbar)

CSS Bookmarklets

View CSS

View CSS (Drag & Drop this link to your toolbar)

View Scripts

View Scripts (Drag & Drop this link to your toolbar)

List Computed CSS Styles

List Computed CSS Styles (Drag & Drop this link to your toolbar)

HTML Table Bookmarklets

Show Table Heading

Show Table Heading (Drag & Drop this link to your toolbar)

Highlight/Show Table

Show Table (Drag & Drop this link to your toolbar)

View Table Cells

View Table Cells (Drag & Drop this link to your toolbar)

Development Bookmarklets

Edit Any Website

Edit Any Website (Drag & Drop this link to your toolbar)

Edit Current Website

Edit Current Website (Drag & Drop this link to your toolbar)

Image Drag and Drop

Image Drag and Drop (Drag & Drop this link to your toolbar)

Grab Screenshot

Grab Screenshot (Drag & Drop this link to your toolbar)

Color List

Color List (Drag & Drop this link to your toolbar)

Shorten URL with TinyURL

Shorten URL with TinyURL (Drag & Drop this link to your toolbar)

Return to Referer

Return to Referer (Drag & Drop this link to your toolbar)

Zoom any Images

Zoom any Images (Drag & Drop this link to your toolbar)

Go To Top of Domain

Go To Top of Domain (Drag & Drop this link to your toolbar)

Web Page – Zoom In

Web Page – Zoom In (Drag & Drop this link to your toolbar)

Web Page – Zoom Out

Web Page – Zoom Out

Clear Background (removes bgImage)

Clear Background (Drag & Drop this link to your toolbar)

Change Text Color

Change Text Color (Drag & Drop this link to your toolbar)

Highlight All Links

Highlight Links (Drag & Drop this link to your toolbar)

View HTPP Headers

View HTPP Headers (Drag & Drop this link to your toolbar)