As a web designer, you know how essential it is to have the right tools for your trade. Well, it’s equally important that those tools are easily accessible, which is why you’ve probably dove into the Chrome Web Store a time or two before. However, when frantically searching for the right Google Chrome extension, you might find yourself in ‘Black Friday’ mode, trying to get the best deal in the quickest amount of time so that you can return to your daily routine. Some are half-baked, outdated, or flat out bad, so you often get discouraged while on the hunt for the right browser add-ons. Don’t fret, as we’ve taken it upon ourselves to handle that for you (no need to thank us). Here we’ve cherry-picked 20 essential Chrome extensions for web designers.
01. Toby
First things first: There’s a good chance that as you read this list, you’ll open up the extensions in a new tab so you can come back to it later to try it out. Our first pick solves that potential problem of ending up with a neverending mess of tabs (an instigator of anxiety for many of us). It’s called Toby and it’s a fantastic little extension that helps you stay nice and organized.
Toby takes the standard tab organizer to a whole new level. It enables you to bookmark not only single webpages, but entire collections of pages, and then organize all of them into one tab - like in a beautiful library. Toby regularly appears in the rankings for the best Chrome extensions, and for a good reason: A survey found that it helped users save up to eight hours per week - the equivalent of 48 days a year!
Free | Install
02. Window Resizer
Web designers must toil over every aspect of how their creations looks across platforms and screen sizes, and while nothing beats testing on each type of device, you have designing to do! That’s where Window Resizer comes in, which is exactly what it sounds like: A Chrome extension that resizes your browser window to emulate different screen resolutions of the aforementioned device types.
Free | Install
03. WhatFont
You don’t have to be a web designer to enjoy WhatFont. A regular web geek will also find use in this extension. When installed, you can simply hover over the text on any webpage to view the name of the font being used there. Now you’ll never be left wondering how to get your hands on your favorite websites’ elusive typography.
Free | Install
04. ColorZilla
While you may think the name is a bit off the market, it’s actually quite apt given that it was originally created for Mozilla Firefox. ColorZilla is a true powerhouse of a Chrome extension in the guise of a “color picker” - even then, calling it an “advanced color picker” would be an understatement. Why? Because the following mentioned tricks are just a few of the ones up ColorZilla’s digital sleeve:
An eyedropper, to get the color of any pixel on the page.
An advanced color picker similar to ones that can be found in Photoshop and Paint Shop Pro.
A webpage color analyzer, which examines DOM element colors on any page and locates corresponding elements.
An ultimate CSS gradient generator.
A palette viewer with seven pre-installed palettes.
Last but not least, a color history of recently picked hues.
Free | Install
05. IE Tab
There’s no use in being nice about it: People only utilize Internet Explorer (IE) for specific reasons - and primarily negative ones. These include that they either don’t know any better or what a browser is, that it’s required to be used at work or school, or that they want to test how their web design will look on the aged browser. IE Tab rescues you from having to install IE and allows you to emulate it in a Chrome tab... Because no one uses Microsoft’s broken web browser and you, as a designer, should really know better.
Free | Install
06. Designers Ruler
It’s hard to write something clever about this extension, as its function is about as cut and dry as its description: Measuring a webpage with a variety of ruler choices for pixel perfection. In short, it rules.
Free | Install