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).
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?
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 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
Several tools in one bookmarklet. All are very handy like "learning which colors are used on a website", "document trr chart" & more..
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.
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
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
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
Check CSS and (X)HTML documents with style sheets. See any possible error & get the recommendations.
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
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
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
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
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:
- an answer to a problem
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.