Gadgetopia

Web Development Bookmarklets: Thanks for Simon Willison for pointing us at this amazing page of bookmarklets that let you play with the CSS and JavaScript of any page.

These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, and experiment with CSS or JS without editing the actual page.

Some killer bookmarklets:

• Computed styles. As near as I can tell, this one lets you click on an element and displays the styles applied to it both directly and inherited from higher up the cascade.


• Generate source. Displays the entire DOM tree as formatted text.


• View variables. Displays all JavaScript variables and functions in scope on the page.


• Shell. Gives you a JavaScript shell in the current page scope.

Great, great tools here. Incidentally, these are only the “Web Development” bookmarklets. There are hundreds of bookmarklets on the site. Some of them are jaw-droppingly good, and worthy of their own post.

If you don’t know how a bookmarklet works, just pick one you like, then drag it to the bookmark bar on your browser. Find a page where you want to use it, and click the bookmark.