To save these bookmarklets, just right click on the link to the bookmark and save it into your bookmark folder OR drag the bookmarklets to your Bookmarks toolbar. Exception: The first three bookmarklets (first two list elements) are links to pages containing the bookmarklets, as I found them difficult to embed here.
To use a bookmarklet, simply right-click on it and choose “Bookmark Link”. I would recommend placing them into a folder in the toolbar, so that any bookmarklet can be accessed with 2 clicks. I find that to be the least-cluttered and easiest-to-use arrangement. Onto the bookmarklets then.
- Updated 07 July 2008:
See the box model for any element on web pages.
- Test Styles and Edit Styles:
Test Styles gives you a new tab/window to type CSS rules for the original webpage. The styles are applied to the webpage immediately. Edit Styles is similar, except that you start with the CSS styles for the page. [thanks, Nick]
- W3C HTML Validator:
Validate the document that you are currently viewing. Great for on-the-fly validation checks while coding pages.
- W3C CSS Validator:
Validate the CSS of the webpage that you are currently viewing. Useful for quick checks during CSS coding.
- Resize Viewport: 800×600, 1024×768, 1280×1024 and 1600×1200:
See how your web page looks like, in different resolutions. Quickly switch between 800×600 to 1600×1200, the two extreme resolutions normally considered in web design.
- View Cookies and Toss Cookies:
View the cookies stored by the current page (using the first link). Then toss the cookies that you wish to, by using the second link.
Tells you server details of a site and displays uptime graph.
- Replace with Alternate Text:
Useful to check for images that do not have alt tags. The downside is that it removes only <img> tags, leaving intact buttons and images created using CSS or sprites.
- Alexa Snapshot Lookup:
Look up your website details and snapshot at Alexa, a popular web metrics website.
- Whois Lookup:
Lookup the WhoIs of the domain you are on.
- Edit current website:
Edit the current page – add text, delete text, move web elements around etc. – all without the need for any other extension.
- Search selected text in Google:
Although not strictly related to web design/development, Google searches can be useful to look up various terms and techniques in presentation and scripting languages.
- Image Drag:
Drag and rearrange images seamlessly from within a page.
- Grab screenshot:
Grab a screenshot of the page that you are viewing, without using any other installed application.
- Color List (use this instead for IE):
Lists colors used in the current webpage.
Further Bookmarklet resources
You might also want to read through these collections of bookmarklets:ADVERTISEMENT
- WebDev at Squarefree:
A large collection of bookmarklets useful for web designers and developers. Maintained by Jesse Ruderman.
- Useful bookmarklets for casual web users:
A guest post that I wrote on DailyApps.net. It lists useful bookmarklets for everyone. Most of them speed up or automate commonly used tasks, which no doubt helps designers and devs too.
As is usual with my resource posts, this list will be continuously updated as recommendations come in. Contact us to recommend bookmarklets. Tell us what are your favorite bookmarklets – for web development or otherwise – I’m sure we can all benefit from new bookmarklets shared by others.