Chrome extensions…they’re better than a bookmark, better than in-browser apps, ridiculously handy, and a fantastic (usually free!) resource for web designers.

You may already be using some extensions, not to mention Chrome’s own DevTools if that’s your style, but don’t stop there! If you’re missing out on any of these must-have Chrome extensions, your workflow might have room for some improvement.

In alphabetical order (because that’s how this particular writer rolls), these are the best Google Chrome extensions for web designers in 2017:

Attachment Icons for Gmail

If you use Gmail for your web design business and you’re dealing with a lot of attachments, this extension will make your emails infinitely more scannable. Each type of attachment (PDF, JPEG, etc.) has its own icon, and that icon will replace the generic paperclip attachment icon in your email list. Now you just need to look for the PDF icon when you’re scanning for that PDF your client sent you a while back, instead of digging through every single attachment.

Code Cola

Look at your site’s source code with Code Cola…and then edit the CSS right there in the source code and see the changes instantly. If CSS is part of your design workflow, this could be your new best friend.

ColorZilla

If you don’t already have a favorite color picker, eyedropper, and gradient generator all in one, check out ColorZilla. It can do all of those things and more. Who doesn’t love a color picker?

CSS-Shack

If you prefer building things in a photo editor and then taking it live on the web later, you are going to love CSS-Shack. With this extension, you can build a site in an environment that feels a lot like a photo editor (using all the same tools you’ll see in your favorite photo editor, too). When you’re ready, you can export the design to a CSS file to use on the site. It’s like magic…glorious CSS magic.

DomFlags

If you work with DevTools, this will be a complete game-changer. DomFlags lets you create your own keyboard shortcuts to DOM elements, which will dramatically increase how quickly you’re able to style the elements in your design. If time is money, and this tool gives you way more time, well…you do the math.

Instant Wireframe

Turn any page into a wireframe. When you turn it on, you’ll see the page under some transparent wireframes. Pretty cool!

Page Ruler

There are a few different screen ruler extensions, and this one’s my favorite. Turn it on and you’ll be able to measure any element on the page you’re viewing. Draw rulers to get pixel dimensions, positioning, and anything else your inner measuring tape needs to feel satisfied. Plus, you can operate it with the arrow keys on your keyboard. There’s also a special mode that will measure the elements on the page as you hover over them.

Responsive Web Design Tester

This extension lets you view a site the way a whole host of mobile devices would. It’s fantastic for perfecting your responsive design for mobile.

WhatFont and Fontface Ninja

Maybe it’s because I love fonts but am not very good at recognizing specific fonts when I see them, but WhatFont is one of my personal favorites. With this Chrome extension turned on, you can hover over any font on a website and see what it is. Inspiration, meet practicality.

Take your font-icizing a step further with Fontface Ninja, which will not only show you all the fonts on a website but connect you to the source so you can buy them right there.

Window Resizer

When you’re working on a design and trying to perfect its responsiveness, this tool will really come in handy. It resizes your browser window according to all kinds of popular monitor dimensions, and you can plug in custom dimensions or resolutions, too. Easy, peasy, responsive squeezy.

Yslow

We all know loading speed is crucial (it’s one of the things that sets Flywheel apart, after all!) but we don’t always know what’s gumming up the works on a slow site. Yslow changes all of that. This extension will tell you how quickly your page is loading and also help you identify the slower bits by comparing the page against 23 of the 34 rubrics Yahoo’s performance team uses. Once you know what the problem is, you can work up a pretty fast solution (see what I did there?).

45to75

This handy little extension helps you optimize the text portion of your designs for readability across all screen sizes. The ideal range of characters in any line is 45 to 75, hence the name, and when you apply this extension to a page you’re testing, you can see where your text falls with just a right-click.

Which one is your new favorite?

Are you already using these Google Chrome extensions? What’s the absolute best one you’ve found so far? Which ones can you not live without?