The 10 Best Chrome Extensions for Designers & Developers

Over the last few years, Google’s Chrome has steadily gained in popularity over all of its competitors. It is rare to find someone who doesn’t use Chrome as their default browser, especially in the web design community. As a result, there are tons and tons of extensions geared towards making the lives of designers and developers easier.

Here is my selection of some of the best from these extensions.

Like the article? You should subscribe and follow us on twitter.

Chrome icon by Raindropmemory

WhatFont

WhatFont

There was a time not long ago, when the choice of fonts for web design was seriously limited. With the explosion in web fonts, things have changed dramatically. Now when I visit a new site with some good looking typography, the first thing I do is hit the WhatFont extension to peek at what fonts are being used. The extension simply adds a tooltip to your mouse cursor which shows the font that is being used for the text under the cursor at any point. Click anywhere and it opens a popup with more details like the complete font stack, size, a preview of the font and where the font is being served from. Once you are done, click the “Exit WhatFont” button in the top-right to go back to regular browsing.

MeasureIt

MeasureIt

When designing websites, you often need to check for dimensions of elements on a page, especially if you are used to relying on the rulers and guides in Photoshop. MeasureIt tries to solve that problem by letting you quickly and easily check the height and width of almost anything on a webpage simply by dragging a box around it. The measurements appear in real time as you drag the marquee across.

Responsive Inspector

Responsive Inspector

When building responsive websites, checking how the layout reflows at different viewports is extremely important. Although there are a ton of websites and extensions that will let you view your designs at preset widths, Responsive Inspector takes a slightly different approach. It reads through your CSS and lists the viewports that have been set for any given page using media queries. That way, you can resize your browser or take screenshots at exactly the dimensions a page was designed for. Perfect for checking whether your media queries work as expected, or to learn how the pros set them on well designed sites.

Window Resizer

Window Resizer

But what if you want to test your website at a variety of different device dimensions? Trying to resize the browser window to a perfect 320 x 480 pixels is not possible, right? Well, that’s where the Window Resizer plugin comes in handy. Just select a size from a list and voilà! Your window is exactly that size, ready for you to test the layout of your web page. Although it comes with a few preset sizes, the real power of the extension is in the fact that you can set your own dimensions and add to the list for easy access later.

Colorzilla

ColorZilla

From simple, focused apps to one that does a lot. Colorzilla – one of the most popular Firefox extensions – is an all-in-one tool for things you can do with color inside a browser. From letting you pick a color from any web page, editing and selecting custom color shades, to analyzing colors used on a web page and generating complex CSS gradients, this one does it all. It also stores a list of all the colors you have picked either from web pages or from the color picker, for easy reference later on.

Palette for Chrome

Palette for Chrome

Inspiration can come in many different shapes & forms, especially when it comes to colors and color palettes. If you comes across an image that seems to have that perfect look for your next design, you can use Palette for Chrome to quickly extract actual colors from the image and create a color palette. Just right-click the image and select an option from the Palette for Chrome sub-menu to create a 16, 24 or 32 color palette or a custom one where you define how many colors you want.

Stylish

Stylish

As a designer, I often find myself getting irritated with how certain websites look and work. Only if there was a way to customize the look of such website, get rid of elements I don’t like or need, or maybe even add some functionality to fit my personal needs. Well, Stylish has been that way for a while now. As an extension that found its roots on Firefox, it has adapted well to Chrome and is now a first-class citizen of the Chrome ecosystem. And if you don’t like tweaking CSS and javascript yourself, you can simply go to userstyles.org and find a script that suits your needs from the thousands that others have shared.

Firebug Lite for Google Chrome

Firebug Lite for Google Chrome

For long, the Firebug extension for Firefox was the holy grail of web designers and developers. The ability to analyze and troubleshoot a web page right from within the browser was a powerful tool to have, and kept a huge chunk of developers loyal to Firefox even as Chrome grew in popularity. Although Chrome’s developer tools have come a long way, those who miss the good old Firebug can get their share with the Firebug Lite extension for Chrome. The extension brings much of the functionality from its big brother, but with a few caveats. You cant read external resources, the javascript debugger is missing and it won’t work well on pages with frames.

SourceKit

SourceKit

If you spend a big chunk of your time inside the browser, here’s one more reason to stay there. SourceKit is a powerful programmer’s text editor that works like a native app from within Chrome and lets you open, edit and save documents. It can also save files directly to Dropbox, making it a great choice for those who like to have universal access to their files. With syntax highlighting and support for a long list of languages, this is surely one to try if you are into code.

Pendule

Pendule

Finally, something I like to call the swiss army knife of designer and developer tools in Chrome – the Pendule extension. This is more of a toolset than an individual and lets you do everything from enabling and disabling stylesheets and images on web pages, manipulating forms, listing colors used on a page, resizing the browser window, displaying rulers, picking colors, validating code and more. If you are a web designer or developer and use Chrome as your default browser workhorse, this is one bundle of awesome functionality that you don’t want to be without.

That’s a Wrap!

So there you have it: my current set of the best Chrome extensions for designers and developers. I say current because the extensions scene is so dynamic and ever-changing, there are hidden gems to be found everywhere, all the time. And I’m pretty sure I’ve missed some, so if you use something that’s not here but deserves to be, let’s hear about it in the comments.

Enjoy this? Check out our other Tiny Yet Useful articles, including apps for Freelancers, Web Developers, and Designers.


Comments are closed.