Useful bookmarklets for web designers and developers

ADVERTISEMENT

Useful web development and design bookmarklets Bookmarklets are bookmarks containing snippets of JavaScript code. They can be used to accomplish specific tasks. Web developers can quicken several common operations by using bookmarklets. Best of all, bookmarklets do not slow down your web browser like extensions do. For example, some of these bookmarklets together can effectively substitute the Web Developer Firefox addon (if you crave for them in other browsers).

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:
    XRAY:
    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.
  • NetCraft:
    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.

Discussion

  1. I really think so too=) I have been poking around the internet for some time this week, and its really hard to find anything interesting to read on blogs=) Maybe its because there are too much of those around =) But your site actually keeps catching my attention=P Great posts, and kawai design ^__^. Ill be sure to give it more visits from now on =]

  2. @Arnaud L:
    That’s a useful bookmarklet, and being persistent would likely be useful for many more web users. I will post the bookmarklet in a future post rounding up more useful bookmarklets – so thanks for the recommendation.

  3. The “Edit current website” is a nice bookmarklet, but lacks what the “Live Website Editor” bookmarklet has to offer.
    Among other things, it can persist the modifications made to any webpages (at least it’s its purpose).
    You can find it here: http://code.google.com/p/lwe/
    It’s still in an early version but it works on most of the websites.
    Cheers

  4. Just saw how useful these shortcuts can be in a post by QQT, bookmarked for future uses :)

  5. Hi Sumesh, I just came across your blog. Good work. Keep it up. Will try to read all your future posts.

  6. @Nick Z: Excellent suggestion about style testing bookmarklet, will update the post soon.

  7. This is pretty good, for those who are forced to do some work on the fly

  8. Hello buddy!! i want to say that short but sweet link,you should also add differ browser list in which one can test his/her website by the way its good that you share it with us.Have a good day.

    God bless you. Punne4e

Comments are closed.