Bookmarklets

Bookmarklets are simple little programs that you can integrate into your browser to make your coding, debugging and researching lives a whole lot easier. Best of all, they're easy to use and modify for your own use.

Then just add these links as favorites like you would any other. You can even add them to your Internet Explorer Links bar or Netscape Personal Bar for immediate access to the most useful ones. You may get a security alert when 'installing' the scripts, but don't worry, these are all perfectly » safe to use and do not change any settings on your computer.
    Once they're added you can use them straight away — just click their name in your bookmarks menu and the script will run.

Validation

Opens up the W3C HTML validator with the current page as the subject. Great for simultaneous coding and debugging. The page will open in the same window as the source page.

The same as the one above, but this will validate any stylesheets linked or imported into the current document.

Much the same as the W3C validator, but the Web Design Group's validator can follow links to other pages and validate them too.

Checks that no links are broken on the page you're looking at. Source: » Favelets.com.

Coding

Toggle CSS Stylesheets

Superb little script that will turn off any linked stylesheet at the touch of a button. Useful as much for coding as it is out of interest. This should really be a feature built-in to most browsers. Click it a second time to enable CSS again. Source: » Favelets.com.

Zoom In / Zoom Out

Zoom in and out of the current page in 50% increments — excellent for fixing pixel-level problems. Source: » Sam-I-Am.com.

Resize to 800x580

A simple code that resizes your window to the dimensions still most common among web surfers. If your page doesn't look good like this, you're boned. You can also resize to 640x460, 1024x748 or any other dimensions you want — just modify the short code. Note that the heights defined here are 20 pixels shorter than the corresponding monitor resolutions to take the Windows taskbar into account. There are more outlandish dimensions at » favelets.com.

216 Websafe Color Chart

Quickly draws a table of the websafe colour palette, in case you've forgotten the HEX codes. The reference page is generated entirely by the bookmarklet.

Basic ISO Latin Characters

Creates and displays a shorthand Latin special character reference. Source: » Bookmarklets.com.

Page Weight

Returns the combined filesize, in bytes, of the HTML file and all of its images. It doesn't include linked CSS code or scripts in the total however. There's also a utility that prompts you for a filesize in KB and returns the download time on a 56k modem. Source: » DanSays.com.

Show Comments

A clever, very cool-looking bookmarklet that adds an icon at each comment in a page's source code. Click the icon to see what the comment contains. Mostly useful out of interest. You need to be online for this to work, as it loads an external JS file. Source: » EndQuote.com.

Choose Style sheet

Since most browsers (most noticeably IE) lack support for choosing alternate stylesheets, this provides an interface for choosing an alternate style yourself, if one exists for a page. Source: » Favelets.com.

Grayscale the Page

Applies a filter over the page that takes all the colour away. Great, quick way of testing your page for legibility. Slows your machine down a fair bit though. Source: » 508 Compliant.

IMGs missing ALTs

Goes through your page checking if all your images have alt attributes. If not, it'll tell you which ones are missing them. Source: » 508 Compliant.

General page Information

Whips up a page of information pertaining to the current document, like the number of scripts, images and stylesheets; the creation and modification dates etc. Source: » Ian Lloyd.

Meta Data

Cleans up a page's meta data into a nice table for easy reading. Source: » Ian Lloyd.

Writing

Count Selected Words

Counts the number of words in a block of selected text. Very useful. Only works in IE. Source: » DooYoo-uk.

Look up word on Dictionary.com

Very handy bookmarklet to have, just select the word you need help with and it'll open the corresponding Dictionary.com definition. There's also a synonym-finder through thesaurus.com. Source: » Blog of Francois.

Page Freshness

When you need to find out when a page was last updated, this bookmark will query the server and return the last modification date. If the server isn't configured right you may get some replies that are clearly wrong. Source: » Bookmarklets.com.

Searching

Google Search

Searches Google for the words selected on the page. If you haven't selected anything, it brings up a prompt box to enter words into. Source: » Google.

IMDb Search

A personal favourite, I got sent this very useful modification of the Google bookmarklet above by a reader. It'll do a search on any words you have selected, or bring up a prompt for your input; and then search the » Internet Movie Database for you.