30 Chrome extensions for designers and devs

There are a ton of free Chrome extensions to help make your life easier – we select the best.

Firefox has long been renowned for its customisability and plethora of extensions, but Google Chrome has gained a lot of popularity in the past few years among web design pros and developers. One of the reasons for this is its speed and built-in developer tools. And now, with a burgeoning collection of Chrome extensions that's growing by the day, it's becoming the first port of call for many web developers and designers.

Here is our selection of 30 Chrome extensions to make your life better.

01. CSS-Shack

Google Chrome extensions - CSS Shack
This Chrome extension lets you create layers styles and export them into a CSS file

This powerful Chrome extension allows you to create designs then export them into a CSS file for use on your site. It supports layers and contains a plethora of the tools that you're used to from your regular photo editor.

02. Marmoset

Google Chrome extensions - Marmoset
With Marmoset you can create gorgeous code snapshots within seconds

This brilliant extension will take your code and output snapshots for your demos and mockups. You can also add themes and effects to create images for promo and your online portfolio.

03. iMacros for Chrome

Google Chrome extensions - IMacros
iMacros Chrome extension lets you record actions and save them

As a web developer, you may be required to test your web pages. Repeating the same actions over and over again can be a tiresome process. iMacros is a handy Chrome extension which lets you record your actions and save them so you only need to do them once. After that you can test your pages over and over again repeating the action with a click of a button, saving valuable time and letting you concentrate on more pressing matters.

04. Font Playground

Google Chrome extensions - Font Playground
Font Playground lets you experiment with local fonts on a live web page

Every designer and developer out there will find this extension invaluable. Font Playground lets you experiment with the local fonts and the entire library of Google fonts on a live webpage without making any actual changes. The beauty of this extension is that it includes all the different font weights, styles and text effects so that you can visualise your webpage before you implement the changes.

05. Window Resizer

Google Chrome extensions - Windows Resizer
This Chrome extension re-sizes the browser window in order to emulate various resolutions

This Chrome extension is a very useful tool that does exactly as it says on the tin – resizes your browser window to help you with your responsive website designs. Choose from a list of popular monitor dimensions or add custom sizes and resolutions for increased accuracy.

06. Project Naptha

Google Chrome extensions - Project Naptha
With Naptha you can highlight, copy, edit, and translate text from any image on the web

If you ever find yourself working from a mockup image with embedded text, Project Naptha could save you a world of mild irritation. Thanks to some smart OCR trickery it enables you to highlight, copy and paste text from any image; it can even translate it for you too.

07. What Font

Google Chrome extensions - What Font
What font are they using? The What Font Chrome extension can tell you!

A very useful Google Chrome extension, What Font allows developers and designers to identify the fonts being used on a web page. So, if you stumble upon a fancy-looking web font that you want to use in one of your future projects, just hover over it and find out instantly which font it is.

08. Yslow

Google Chrome extensions - YSlow
YSlow tells you what's slowing your page down

This tool doesn't just check how quickly your web page loads, it also tells you what, if anything, is slowing it down. Yslow tests your webpage against 23 of the 34 rules identified by Yahoo's performance team. It's an extremely useful tool to analyse web pages and it also suggests ways to improve their performance.

09. Web Developer

Google Chrome extensions - Web Developer
The Web Developer Chrome extension provides a range of useful dev tools

As a web developer, you might ask yourself how you have lived without this extension. It adds a toolbar button to Chrome with a plethora of useful web developer tools. It's the official port of the Web Developer extension for Firefox.

10. Page Ruler

Google Chrome extensions - Page Ruler
Draw a ruler to get pixel dimensions and positioning with Page Ruler

Page Ruler is a great tool for precisely measuring the elements on any web page, then manipulating it for your benefit. Draw a ruler to get pixel dimensions and positioning.

11. Web Developer checklist

Google Chrome extensions - Web Developer Checklist
Fix issues quickly with this handy Chrome extension

This tool allows you check all if your web pages are following best practice when it comes to SEO, usability, accessibility and performance (page speed). So, if, for example, you don't have an H1 tag on a web page or if a web page is missing its meta title or meta description, it will notify you so you can fix the issue quickly. If you click the 'more info and help' link at the bottom of the extension you will find a more in-depth checklist.

12. DevTools Autosave

Google Chrome extensions - Dev Tools Autosave
Automatically save any changes to a page's CSS and JS to its source file

A true gem for all web developers out there, DevTools AutoSave allows you to automatically save any changes that you make to a webpage's CSS and JS via the Chrome Dev Tools environment to its source file. It's easy to set up and use and it will save you lots of time.

13. Instant Wireframe

Google Chrome extensions - Instant wireframe
View live web pages with a wireframe overlay

Turn any web page into a wireframe with just one click. This Google Chrome extension helps web developers and designers view web pages, whether local or live on the web, with a wireframe overlay.

14. ColorZilla

Google Chrome extensions - ColorZilla
With ColorZilla you can get a color reading from any point in your browser

The ColorZilla Chrome extension is an advanced eyedropper, colour picker, gradient generator and more useful colour tools that will help you in your design – right there in your browser window.

15. Ripple Emulator

Google Chrome extensions - Ripple Emulator
Ripple Emulator offers debugging, DOM inspection and automated testing

Ripple Emulator is a multi-platform mobile environment emulator that can help you test your web app using a number of different devices and screen resolutions. Ripple can be used in conjunction with existing development tools to perform debugging, DOM inspection and automated testing.

Next page: 15 more useful Chrome extensions