Web Page Debugging & Development Bookmarklets

A collection of tools for figuring out why a page isn't doing what it should. Reveal table structures and nesting, zoom in and out, snapshot the page's DOM for dHTML work, debug forms.. That kind of stuff.

Miscellaneous Bookmarklets

This is a loose (and short) grouping of "productivity" bookmarklets -- tools that I've made to remove a step or two from repetitive browser-based tasks.

Compatability.

Some of the scripts are only built for and tested in certain browsers. Some may run in more browsers than I've indicated (or could be adapted to do so). These are tools that I've made to meet my own requirements. Sometimes I test and use them in a range of browsers; othertimes I'm only interested in whether it works in one specifically.

About Bookmarklets

Also known as favelets (for the Internet Explorer-only species.) First stop: www.bookmarklets.com
These pages are devoted to bookmarklets I've written, but you'll find many many more at bookmarklets.com. I've mostly focussed on creating specific tools to address problems in my day to day work of web building.

A bookmarklet is a simply a javascript script masquerading as a URL. The pseudo-protocol javascript: tells the browser to have javascript interpret what follows. Otherwise they can be treated just like any other url, by inserting into a link, pasting directly into the location bar, or bookmarked or added to your favourites. Like many people I have the ones I use most often added to my links bar, where they become handy extensions to the browser's functionality.

As urls there are some practical limitations and considerations. First the bookmarklet must be all on one line. If it is too long, you may have trouble dragging and dropping the link. If it is way too long it may get truncated arbitrarily. (I don't know what the actual character limits are, I hear IE will accept up to 4k? I'll test it one day, or maybe someone has a definitive answer?)

The other thing to bear in mind is the return value. If the bookmarklet/script generates a return value, the browser will display it. So you end up with a blank pages with e.g "true" as content. If you don't want to change the browser location (which is what is actually happenning) catch all statements that will generate a return value. A variable assignment var i = 0 will return true, as the assignment succeeded. It should be voided like so:

javascript: void(var i = 0);

The same goes for alerts, prompts and so on. Most statements return some kind of value, so you'll use void() a lot.