Brilliant Bookmarklets

14th April, 2013

I’m a big fan of bookmarklets and use them daily to improve my workflow and assit with web development. In short, a bookmarklet is a small application you can place on a browser’s bookmark bar perform specific functions, depending on what they are coded for.

Bookmarklets are generally written in Javascript and are really easy to install and remove. Generally they work on most browsers, but personally I only use them on Chrome, my first choice for now.

Installing a bookmarklet

To install a bookmarklet all you have to do is drag it’s link to your bookmark bar and boom! your good to go. Then whenever you want to use it simply click the button on your bookmark toolbar.

Some of my favourites

Whilst there are loads of bookmarklets out there, these are some of my personal favourites…

Window Size 

A handy bookmarklet that displays the dynamic viewport/screen size in pixels on any website – useful for inspecting and debugging CSS3 @media queries and responsive/adaptive layouts. Window Size

DeCSS3

Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3. DeCSS3

WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.  WhatFont

Responsive Design Bookmarklet

A handy tool for responsive design testing. RWD Bookmarklet

Remove CSS

A quick way to disable all CSS for a given page. Remove CSS