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