32 Indispensable Bookmarklets for Web Developers and Designers

32 Indispensable 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.

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

Validators and Checkers

CSS Bookmarklets

HTML Table Bookmarklets

Development Bookmarklets

You might also like…

2200 CMS Load Time Comparisons, Which is the Fastest? »
37 Phenomenal jQuery Plugins and Demos for Developers »
40+ Must Have Extensions, Bookmarklets and Tools for Google Chrome »
27 Indispensable Web Design and Development Firefox Extensions »

RSS & Share

• Subscibe via RSS
• Follow us on Twitter
• SDM on FriendFeed
• SDM on Facebook
• Del.ici.ous Bookmark
• Stumble Speckyboy!
• Follow us on Digg

Worthy Links

• StylesInspiration
• Smashing Magazine
• Design Reviver
• N.Design-Studio
• WebDesigner Depot
• Blog.SpoonGraphics
• Spyre Studios
• Six Revisions
• Vandelay Design
• Web Design Ledger
• Onextrapixel
• DesignerFix
• 1stWebdesigner.com
• Pink Moustache
• ShortRunCards.com

Categories

• Ajax/Javascript
• Cheat Sheets
• CSS
• Firefox Extensions
• Fireworks Extensions
• Fonts
• Free Icons
• Graphic Design
• Icon Design
• Logo
• Patterns
• Photography
• Photoshop
• Showcase
• Tutorials
• Typography
• Vector
• Web 2.0 Apps
• Wordpress
• Wordpress Plugins
• Wordpress Themes
• • View Archives »

We are a proud member of the...

Are you one of our Facebook fans?

We are optimized by...