15 Must-Have Bookmarklets For Web Designers And Developers

Bookmarklets are a great way of saving time when used regularly. With just a click, they can provide so much information / help.

Here is a list of 15 very handy web designer / developer bookmarklets which includes:

  • learning the colors used
  • inserting a ruler on a webpage
  • reloading CSS without reloading the whole site & more..

To use them, bookmark the "Get It" links. If no "Get It" link is provided, than they can be bookmarked from the author’s websites or:

Click here to download all the bookmarklets mentioned as a Firefox bookmark folder (can be added from bookmarks>organize bookmarks>import&backup>import HTML menu at Firefox).

Note: If you’re not using it already, Firefox web developer extension is strongly adviced for developing faster besides using these bookmarklets (few of the bookmarklets mentioned are already in the extension).

WTFramework – Learn JavaScript Framework Used

WTF Framework

When you wonder which JavaScript framework is used on a website, rather than checking the source, simply click to this bookmarklet & it will display the framework(s) used.

XRAY – See Details Of Any Web Element

XRAY Bookmarklet

It lets you see the box model in action for any element, all the details of it.

Just click the XRAY button to instantly get the answers of:

  • where is the top and left of this element?
  • how big is each margin? how big is the padding?
  • how wide and high is the content box?

MRI

Web Development Bookmarklet

A free cross browser tool that lets you test selectors with any web page. Selectors, particularly complex ones can be difficult to get exactly right – MRI lets you experiment with them on any web page.

Design – Grid-Rule-Unit-Crosshair

Web Design Bookmarklet

Design provides a menu with 4 options:

  • Grid: overlays a configurable grid.
  • Rule: a ruler which can snap to block level elements.
  • Unit: for measuring the differences between 2 given points.
  • Crosshair: draws a crosshair cursor on the page to assist in layout alignment

Slayer Office – Favelet Suite

Designer Bookmarklets

Several tools in one bookmarklet. All are very handy like "learning which colors are used on a website", "document trr chart" & more..

Aardvark – Display Elements & More

Web Elements Bookmarklet

Aardvark enables you to view the details of the element & to do various things, such as:

  • delete the selected element from the page
  • isolate the element
  • move the selection rectangle outward to the containing element & more.

Tip: The bookmarklet is at the right side of the website.

ReCSS – Reloads The CSS

CSS Reload Bookmarklet

A so simple but helpful bookmarklet.

When editing a CSS file, to see the result, all the page is generally refreshed. ReCSS only updates the CSS & the results are seen quicker.

It specially helps if you are developing an Ajax application where some content appears after sometime, you simply don’t have to wait.

Edit Any Website – Get It

Edit Any Website

Want to see how a text will look on a webpage? Or, how would it be if that image wasn’t there?

This bookmarklet makes any website editable, positions of the elements & text can be changed.

W3C Markup Validator – Get It

XHTML Validate Bookmarklet

Check the markup validations of any web document: HTML, XHTML.. See the results & if there are any errors, find the recommendations.

W3C CSS Validator – Get It

CSS Validation Bookmarklet

Check CSS and (X)HTML documents with style sheets. See any possible error & get the recommendations.

Resize Browsers

Resize Browser Bookmarklet

When testing a design in various resolutions, these bookmarklets resizes your browser to the mentioned popular sizes.

So, rather than updating the resolution of the computer, this method is way faster.

BuiltWith – See The Ingredients Of A Website – Get It

BuiltWith Bookmarklet

This bookmarklet gets you to the BuiltWith website & displays various informations about a website like:

  • web server it is hosted
  • analytics apps. used
  • scripting language
  • widgets installed
  • blog software
  • advertising platform  & more.

Super Screenshot – Instant Screenshots – Get It

Screenshot Bookmarklet

When you need to get a screenshot of a webpage, but don’t want to use an image editing or screenshot software, this bookmarklet helps alot.

It, almost instantly, presents you the full page screenshot & also you can set the size & format form the page displayed.

BrowserShots – Test Webpages In Different Browsers – Get It

BrowserShots Bookmarklet

This bookmarklet directly sends the URL to be tested on different browsers to the BrowserShots website & you only select the browsers /OSs.

Google Translate – Get It

Googl Translate Bookmarklet

Ok, this is not directly related to web design & development but it helped me so much while developing & there’ll probably be no better post to share it.

Every designer/developer searches:

  • inspiration
  • an answer to a problem
  • resources…

And a serious part of these contents are not written in a language we know. So, this bookmarklet translates a website into English (you can update it to work in your language) & increases the possibilities to find inspiration, answers & more..

 

Is your favorite bookmarklet missing? Please share it in the comments. And if not subscribed to the WebResourcesDepot RSS feed, click here to subscribe & get the free web resources everyday.

39 Comments
  1. Reply Mark November 25, 2008 at 9:02 AM

    great links – many of them essential tools for any web developer worth his salt

  2. Reply Jerome Slan November 25, 2008 at 9:37 AM

    Nice list !

  3. Reply Yaron November 25, 2008 at 12:49 PM

    Nice list.
    I Just wanted to comment that you wrote “Aardwark” instead of “Aardvark”, both in the title and the description.

  4. Reply Umut M. November 25, 2008 at 1:19 PM

    @Yaron,

    Thanks very much. Just fixed it.

  5. Reply Rich November 25, 2008 at 3:22 PM

    Very useful resources I will try them out…

    HostedFTP.com
    “File sharing that is secure, reliable and easy to use”

  6. Reply glucko November 25, 2008 at 5:03 PM

    What about firebug? Firebug is the best ever, it is enought. ONE: Firebug.

  7. Reply Yaron November 25, 2008 at 6:08 PM

    @glucko, The intent here was, I think, to provide bookmarklets. Pieces of javascript code that you can use from any modern browser, without installing anything. So they’re good as something that is lightweight, cross-browser, available immediately from a link/bookmark without installing and restarting the browser, and don’t require any trust beyond what you’d let javascript inside the browser have.

    Firebug is terrific, and definitely should be the first thing any web developer should look at, but it’s for Firefox only, and it’s an installed extension, not a bookmarklet.

    Some of the things mentioned in this post come in several forms, both as bookmarklets, and as extensions/add-ons (Including Aardvark, that has a FF extension). This wasn’t mention, I assume for the same reason, because that was not the purpose of this post.

  8. Reply DK November 26, 2008 at 2:21 AM

    Nice collection. Thanks
    DK

  9. Reply madaerodog November 26, 2008 at 3:32 AM

    You should definitely use them too .. wrd 😀 try validating this page for example ..

  10. Reply Umut M. November 26, 2008 at 4:18 AM

    @madaerodog,

    You’re totally right :). I’m one of the developers who prefer “put it online & polish later”.

    I’m finding time for the last few weeks & fixed some and will be fixing by time..

    There is a word like “tailor can not sew his own rip” which explains the situation well. 🙂

    Bests.

  11. Reply Oscar Godson November 26, 2008 at 5:48 AM

    Might I suggest http://projectdeploy.org

    It will create a site framework in a couple clicks and saves a lot of time. It speeds up the process for designers who want to slice also not having to create the DOCTYPE, link the CSS, add a js library and stuff.

    After you click deploy it creates a bookmark you can then click on and recreate your setup again without having to fill out the form again.

    Cool.

  12. Reply 18pints November 26, 2008 at 6:03 AM

    I found the cross browser test quite useful when building my site.

    http://www.OMGchat.com

  13. Reply alex November 26, 2008 at 6:36 AM

    Nice collection. Thanks

  14. Reply Calvin Froedge November 26, 2008 at 10:44 AM

    Great links, I’m always looking for tools to help make web developing faster.

  15. Reply Cover November 26, 2008 at 1:03 PM

    Very good resources. Bookmark worthy indeed.

  16. Reply josh November 27, 2008 at 6:43 AM

    awesome list, never knew about bookmarklets. very cool. I agree that firebug is number one, but so many of my unanswered questions are in a different browser where firebug is of no help. im excited to use these.

  17. Reply Cesar Noel November 27, 2008 at 8:04 AM

    Nice detailed list. I might use some of the bookmarklets on my web development projects

  18. Reply dlv November 27, 2008 at 11:35 AM

    awesome, this post is great !! the best in this month !
    thank for it, thanks for the time spended

  19. Reply Danh ba web 2.0 November 27, 2008 at 11:40 PM

    Great list. Thanks for collection !

  20. Reply craptasticle November 28, 2008 at 10:02 AM

    It’s bookmark, plain and simple, not the ghey bookmarklet that you insist on using, get it right you internet noob

  21. Reply Umut M. November 28, 2008 at 10:08 AM

    @craptasticle,

    Sorry that you’re wrong.

    Bookmarklet is different than a bookmark. Check:
    http://en.wikipedia.org/wiki/Bookmarklet

    Bests.

  22. Reply Gopal Raju November 29, 2008 at 12:54 PM

    The best collection I’ve ever seen!!

    Gopal,
    ProductiveDreams.com

  23. Reply Will Ayers December 1, 2008 at 10:44 AM

    Awesome! Thank you very much for these. The Reload CSS one is going to be very helpful for me.

  24. Reply Kane December 2, 2008 at 12:05 AM

    thanks its nice list . help me lot of new ideas and many things thanks 🙂

  25. Reply Ronald December 3, 2008 at 3:53 AM

    Thanks for providing these bookmarklets.I will try for this.

  26. Reply xuan December 3, 2008 at 6:21 AM

    thanks for your list
    its really cool 😉

  27. Reply Gregor December 19, 2008 at 8:20 AM

    Thanks for this – some really useful bookmarks there. I’ve seen the website editing one before which is clever, but I don’t really see the use of it. Apparently spammers use it to mock up emails with screenshots!

  28. Reply Hasan Tayyar BEŞİK December 22, 2008 at 8:50 AM

    Really must have tools!!!

  29. Reply pihentagy December 29, 2008 at 5:25 AM

    Edit Any Website

    It would be cool, if it would toggle the edit mode instead of always activating it…

  30. Reply Umut M. December 29, 2008 at 6:13 AM

    @pihentagy,

    You’re right. It seems possible with an “if clause” but the easiest thing to do can be creating a disable-edit bookmarklet with address: contentEditable=’false’ rather than true.

  31. Reply Steve January 22, 2009 at 10:43 AM

    The superscreenshot website has some issues, try our bookmarklet here:
    http://www.webshotspro.com/bookmarklet.php

  32. Reply Jennifer June 12, 2009 at 9:44 AM

    XRay is awesome…It’s one of my favorites.

  33. Reply Darko June 25, 2009 at 3:48 AM

    Ehhh by the way. Firebug has a Firebug lite version that is a bookmarklet. Runs in any browser.

  34. Reply Josh December 29, 2009 at 3:14 AM

    XRAY seems to be a particularly useful tool, espescially if we want to track specific positional elements of box-models in CSS. The w3C mark-up validator ofcourse is simply vital to have. Without good mark-up, a design is ruined.

    Great list.

  35. Reply [MA]Pascal December 29, 2009 at 8:41 AM

    Visual event is missing in this list :
    http://www.sprymedia.co.uk/article/Visual+Event

  36. Reply SEO Services Tampa January 11, 2010 at 5:34 AM

    Whats a great tools. Thanks for share good tools.

  37. Reply pacman online free December 20, 2011 at 1:47 AM

    I think firebug and visual event should be added. But overall great list of tools.

  38. Reply S.Duddy September 25, 2012 at 10:36 AM

    Some of them were new to me. Thank you for sharing.
    I really appreciate your efforts.

Leave a reply

Search