Web Page Debugging and Development Bookmarklets

View Source
 compatible: tested in win32, mac NN3+, win32 IE4+; Mac ie5

Updated. Prompts for a url (defaults to the current location) to view the source of. Then for all but MacIE5 it just prepends 'view-source:' and sets the location to launch the url in the source viewer. MacIE5 doesn't understand the view-source: protocol, but nor does it have the problems windows browsers seem to have viewing text/css content, so it just opens it directly into the browser.

Send As Text
 compatible: NN3+, IE, Mac, Win32, (*nix?)

This prompts for a url, and sends it to a cgi on my server that sends it back in a <pre> html wrapper, with the mime-type text/html. In most cases this is the same as a view-source, but it's a quick way to double check what code the server is actually sending. Update: The <pre> html wrapper should fix the problem in IE where it was second guessing the mime-type.

Show Tables
 tested: IE 5.5 Win32

Turns on table borders and color codes them to reveal nesting. This script inserts a link node into the current document head, which pulls in a stylesheet I maintain on my server. Feel free to download and adapt this to your own purposes: tableborders.css

Zoom In, Zoom Out
 compatible: IE 5.5, Win32

This pair will zoom in/out the current page in 50% increments. Great for pixel level debugging and using with Element Ancestry to click on exactly the element/screen are you are interested in.

The scripts add/modify a style attribute to acheive the zooming. Thanks to Adrian Cotter for his improvements and doing the zoom out.

I also have a pair of icons (.ico) zipped up here: zoom_icons.zip (966 bytes)

Element Ancestry
 compatible: IE 5.5, Win32

Makes all elements on the page clickable, throwing up prompt which shows the name of the element you clicked, and all its parents. It also includes any id or classnames that are attached to each element. Reload to make it go away.

Sample output: INPUT#fieldId SPAN P FORM TD.content TR TBODY TABLE BODY

This goes into a prompt as I'm typically wanting to copy some or all of this information into an editor.
I use this a lot when I'm working with CSS and need to know what styles a particular element might be inheriting, or where to look for a glitch I'm seeing. Using the zoom tools (above) you can get in there and examine those 1px table and div borders.

This should work in NN6, I've not tried it there yet though. It uses the same insert node technique as "show tables" to insert a script into the head.

View Dom, View Dom Fragment
 compatible: IE 5.5, Win32, (IE5 Mac, NN6?)

Takes a DOM-type document object snapshot and throws the code into a new window. Although in IE the code gets mshtml-ized, this is still handy for debugging dhtml or dealing with dynamic, interactive pages. Dom Fragment is the same but prompts for an element ID and just gives you that node (and any descendants). (Which you could get by using Element Ancestry above)
To see an example, hit the Show Tables link above, then the View DOM link. See the last LINK element in the HEAD? That's not there if you view-source; Show Tables put it there.

Echo Form
 tested: IE 5.5, Win32

Changes the ACTION attribute of forms on the page to point to a cgi on my server, that displays the field names and values.
Go try it on google or something. I use this a lot when I'm doing web form based client-server type stuff. It's the first place to check before you dive into your source code - is your server-side app receiving what you think it's receiving?
Reload the page to restore the defaults.