Incredibly Useful Bookmarklets for Developers

This post is geared towards developers and technical users in general, not just useful info for widget development but for any web application. I was first clued into bookmarklets by one of our developers, Mark, who then passed on to me an entire list of extremely useful ones that I've put together here.

What are they? Bits of JavaScript code that run while you are viewing/testing a page.

Why do I care? They enhance troubleshooting and give you more tools to aid in development. They are shortcuts.

What do I do? Follow the instructions in the links provided. You will create a new bookmark and set the URL link to a bit of JavaScript, then when you're on a page you'd like to manipulate you can just select your bookmarklet.

Here's the list:

XRAY - http://www.westciv.com/xray/
XRAY let's you click on elements on the page and see specific information about them: size, position, and other detailed CSS assignments such as the inheritance hierarchy.
Works in IE6+, FF, and Safari

JASH - http://www.billyreisinger.com/jash/
This utility gives you command-line JavaScript access to the page. This one is a bit different in that you have to serve the script and CSS file they provide. Kind of a headache, but this tool is worth it as far as helping you debug your scripts. The best part? It works in IE ;)
Works in IE6+, FF, and Safari

Pretty JSON - http://sandbox.mikepurvis.com/js/prettyjson/
If you're trying to read through JSON that's been rendered in your browser, this utility will pretty it up (and validate it!) for readability.
Works in FF

Get Passwords -javascript:(function(){var%20s,F,j,f,i;
%20s%20=%20%22%22;%20F%20=%20document.forms;
%20for(j=0;%20j<F.length;%20++j)%20{%20f%20=%20F[j];
%20for%20(i=0;%20i<f.length;%20++i)%20{%20if%20(f[i].type.toLowerCase()%20==%20%22password%22)%20s%20+=%20f[i].value%20+%20%22\n%22;
%20}%20}%20if%20(s)%20alert(%22Passwords%20in%20forms%20on%20this%20page:\n\n%22%20+%20s);
%20else%20alert(%22There%20are%20no%20passwords%20in%20forms%20on%20this%20page.%22);
})();
Say you visit a site that has your password stored automatically (but covered by asterisks or dots or whatever), and you really need to know what it is! Or you swear you're typing in the correct password... but you can't see it. Plug this big chunk of JS into the browser and a pop-up will present it to you.
Works in IE6+, FF, and Safari

WTFramework - http://blog.olicio.us/2008/11/08/wtframework-bookmarklet/
WTF will tell you what JavaScript framework is used on a specific website.
Works in IE6+, FF, and Safari

Firebug Lite - http://getfirebug.com/lite.html
It's like Firebug for IE and Safari!! Missing a few features but this utility is extremely useful in troubleshooting pages.
Works in IE6+ and Safari. Use regular Firebug in Firefox!

MODIv2 (Mouse Over DOM Inspector) - http://slayeroffice.com/tools/modi/v2.0/modi_help.html
View and manipulate the DOM of a web page.
Works in IE6+ and FF

Edit a Website - javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Edit any web page you're looking at on the fly. Poke this JS into your browser, and click around on the page to edit text and move things around.
Works in IE7 and FF

Comments

[kit]

On Get Passwords, it looks like some of the code is cut off. What am I missing?

[Jenny Blumberg]

Hey kit, I adjusted it so that code is easier to select. Some of it is still a bit hidden but at least now you can pull it out in FireFox to use. Thanks!

[PCheese]

contentEditable works in Safari (just tested in 4DP, WebKit will work for sure, and 3.2 as well iirc but I haven't tested that one recently).