• Reported by Nate

A while back I had put together a little "show divs" bookmarklet for the purpose of quickly viewing the divs and spans in a page layout. The bookmarklet simply gave all divs and spans borders on the fly using javascript and CSS. It was based on a popular and very handy "show tables" bookmarklet created by sam-i-am. I just discovered when looking up my show divs bookmarklet that it no longer works (because I didn't account for some after effects of a recent smarty pants install). So I'll need to go back and edit the post and comments to take this into account, but in the meantime here is an alternate solution that I think is more useful than my original bookmarklet:
You can use Phalen's bookmarklet maker to create your own personalized CSS tool. The bookmarklet maker simply creates a link which includes the required javascript to reference a local file that can temporarily overwrite the page's style with whatever CSS is most useful for your style diagnosing needs. For instance, you can create a mimic of the original show divs bookmarklet by simply using an element (DIV and SPAN) selector in your local stylesheet and giving them 1 pixel dashed borders. You could take it a step further and render each level of nesting divs a different color using child (div>div) selectors.
For those of us using OS X, the file reference should look like the following - depending on where you'd like to store the CSS file (in this case I'm storing it within the documents folder for my user login):

file:///Users/YourName/Documents