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.
Chrome icon by Raindropmemory
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.
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.
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.
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.
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.
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.
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.
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.