Useful bookmarklets for web designers and developers

ADVERTISEMENT

Howdy! It appears that you have come to this blog for the first time. In order to receive more useful posts like this, you can subscribe to RSS feed or get latest articles to your email inbox for free. Thanks for visiting this blog, and have a good day.

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:

  • 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.

For more designer tips and resources, please subscribe to our RSS feed or get latest articles by email. Also, give it a thumbs up on Stumble Upon if you liked this post!

July 6th, 2008 Leave a comment

8 Comments

  1. punne4e said on July 7th, 2008

    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

  2. Nick Z said on July 7th, 2008

    I find https://www.squarefree.com/bookmarklets/webdevel.html#test_styles invaluable - I’ll create a HTML document, and then using that bookmarklet I can shape the stylesheet in realtime. It’s also very handy for writing user stylesheets.

  3. sunny beach said on July 7th, 2008

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

  4. ajay said on July 7th, 2008

    sumesh u r blog’s about and Advertise pages are really good

  5. Post authorSumesh said on July 7th, 2008

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

  6. How to Edit Any Webpage Live in Your Browser said on July 8th, 2008

    [...] edits are not permanent and limited to your browser window only. Refresh the page and its gone. Techzilo lists many such bookmarklets to modify [...]

  7. Pras said on July 9th, 2008

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

  8. Keith Dsouza said on July 10th, 2008

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

Leave a comment