Grid Helper bookmarklet for web development

gridhelper.js

javascript:(function() {
	if ( !document.getElementById( "__grid" ) ) {
		d = document.createElement( "div" );
		d.setAttribute( "id", "__grid" );
		d.setAttribute( "style", "background: url('http://" + window.location.hostname + "/images/grid.png') repeat-y 50% 0; height: " + document.height + "px; left: 0; position: absolute; top: 0; width: 100%; z-index: 16000000;" );
		
		document.body.appendChild( d );
	} else {
		document.body.removeChild( document.getElementById( "__grid" ) );
	}
})();

This one's pretty easy to use:

1. Save this code as a bookmarklet in your favorite browser.
2. Drop a "grid.png" file into your-site-root/images/.
3. Click the bookmarklet to add the grid overlay.
4. Click the bookmarklet again to remove the grid overlay.

This code works best when you're running a Rails app or something similar where ~/images is off the root (e.g. http://localhost:3000/images/). Feel free to modify this to your heart's content.