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

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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)

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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

Web Design BookmarkletBookmarklet : 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)

Author: (589 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments