I love Chrome extensions. They allow me to do cool little things with just a few clicks, and they’re super versatile. Want to find the size of an image? There’s an extension for that. Take out cookies? Extension. Find a font? Well I’ve already covered that one, but you get the idea. With all that in mind, I put together a list of extensions for Google Chrome specifically targeted toward web designers. They may not all be perfect for your day gig, but give them a shot – you never know when they might come in handy.
Awesome Screenshot
Ever need to record a screencast? Or maybe you want to do a screenshot of a webpage, but one of the entire page, not just what’s visible on your monitor? That’s what Awesome Screenshot is for. You can even annotate them and blur sensitive info. Now that’ll come in handy.
RemoveCookiesForSite
Want to ditch all the cookies on a particular website? Just click on the cookie in the menu bar, and all the cookies found on that website will be deleted. Easy as pie.
BuiltWith
Ever look at a cool website and think, “I wonder what they used to build that site?” Well, BuiltWith will tell you just that. It looks up the page, digs around a bit, and pulls out whatever technologies it can find. This way you can see what the developers used to make it happen, and whether or not you want to use them in your own project.
PerfectPixel
Sometimes things shift around a bit in the time when you go from designing a website to when it’s coded. PerfectPixel lets you put a semi-transparent image overlay on top of the final HTML product, and then you can compare the two pixel by pixel. Think about how handy that would be, hmm?
CSS Peeper
CSS can be fun, but if you want to find out what another site did, you have to start hunting down things through a bunch of code. Instead, CSS Peeper can show you line-heights, fonts, buttons sizes and more on any particular site, and then allow you to inspect that code to break down what you can use on your own page.
Full Page Screen Capture
OK, this one is simple. Full Page Screen Capture lets you take a screenshot of an entire webpage, not just what’s visible on the screen. So, should you want to have a shot of this beautiful article right here, you could get it in its entirety just by using this extension. You’re welcome.
Grammarly
As a former copy editor, I have a few thoughts about the Grammarly system, but that’s kind of my thing. If you’re a web designer, grammar might not be your strong suit. Instead, Grammarly will give you tips and tricks to not only produce clean copy, but also to improve it as you go. And since it’s everywhere your browser can go, that means it works on Gmail just as well as it does on Facebook.
Google Font Previewer
Sometimes you don’t know what the perfect font is going to be until you see it on the page. Google Font Previewer lets you pick any Google Font from their API and then put that on the webpage itself, or on a CSS selector. That way, you can quickly bounce between fonts and see what works best.
Stylebot
Stylebot has a little bit of magic inside. It lets you tweak the CSS of any website so that you can view it in multiple ways. Just pick out an element, then tweak color, font, visibility, and a ton more. Or, should you be feeling frisky, you can write your own CSS and inject that in there. It’s a fun way to preview other sites and see what works and what doesn’t.
ColorZilla
Picture the eyedropper from Photoshop being in every webpage, and that’s ColorZilla. You can use it to pull color readings from anywhere in the browser, which will give you the hex code so that you can use it in your own designs. There’s also an advanced color picker, a webpage color analyzer, and a palette viewer, so there’s lots to choose from. Color lovers beware: this one might get you into some trouble.
Flat Colors Guide
Flat colors are all the rage, and if you want to see some options, this is a great one. Click the extension and see all of the different colors you can choose from, plus their hex codes.
tab packager
If you’re like me, you’ve got a million tabs open on your browser at any one time. Tab packager lets you bundle all of those browser windows up into one link, so that you can then send that link to someone else so they can open them all themselves. I know I’d love to use that just when I switch between machines, or even devices.
Instant Wireframe
Think about the time you could save if you could do a wireframe from any website instantly. It could give you ideas or a starting point for your next big design. That’s exactly what Instant Wireframe does, and it does so by putting an overlay onto the page with the wires intact. Then you can save or print them for later use.
Responsive Web Design Tester
Web designers are constantly figuring out different layouts for different devices, and if you want to test your websites in all their different sizes, this extension has your back. It lets you select the device through a menu, and then renders the page appropriately. That way you can figure out what works and what doesn’t.
Dimensions
Want to find out the distance between two elements on a webpage? That’s Dimensions in a sentence. Activate the extension and mouse between different elements. The extension picks up the borders automatically, and then you can move it to the next element and find out the distance. Easy as pie.
Page Ruler
I love extensions that help with my OCD, and this is one of them. Page Ruler adds a ruler to any page, that way you can see the width, height, and position of the various elements. You can then pull guides – just like in Illustrator – and use those to determine the size of the different components. You can even outline elements on the page with Element Mode.
Perfmap
Heatmaps are great, but what about one for the load time of various elements on the page? Perfmap does just that, allowing you to figure out what parts of the webpage are taking too long to load, slowing down your viewers in the process. It’ll even tell you the load time for the entire page.
45to75
Writing copy can be hard (don’t I know it), but when you’ve got to fit it within a certain amount of characters, that’s even harder. This extension optimizes the line length by measuring the characters and ensuring they’re between 45 and 75 characters long. Doing this keeps all of the text legible, no matter what scenario you’re in.
Resolution Test
Resolution Test lets you … ummm … test your webpage in different resolutions, obviously. But what’s different here is that you can either choose from pre-done options, or create your own. Think about how handy that one will come in when those new devices drop.
Eye Dropper
Just like it says on the tin: It’s an eye dropper tool for Chrome, so that you can pull colors from webpages just like you can pull colors in Photoshop. You can then create a personal color history, and grab hex codes. Fancy.
Web Developer
This one is cool because it gives you another toolbar button in the browser, and inside that are a bunch of web developer tools. How many? A whole ton, frankly, so dig in to find out if it’s got what you need. Chances are it does.
Image Downloader
I use this one personally, and I love it. Click the extension and it pulls out all of the images on the page and the ones it links to, then you can select the ones you want. You can even filter them down further based on a number of criteria, and then download them all at once. It comes in very handy for me, that’s for sure.
WhatFont
Wait, haven’t I talked about this before? Yup, but it’s a handy tool for web designers, too. It lets you identify what font is on the page. Easy, right? Absolutely. And it saves you that extra step of downloading an image and then uploading it to a website that does the work for you.
Check My Links
Do all the links on your website work? Check My Links will do just that – and the ones that work will show up in green, while the ones that don’t are highlighted in read. It’s straightforward and simple, which is my kind of extension.
Chrome Daltonize!
I don’t know about you, but I think about how differently abled people view the work I do all the time. Chrome Daltonize! shows details to colorblind users, that way they can see what they wouldn’t have seen otherwise. By using it yourself, you can adjust your colors so that the colorblind can see them all the time.
Window Resizer
Here’s another great one for testing your responsive designs. There’s a list of resolutions available on the sides, and you can even customize it for the sizes you use all the time. You can also view the new resolution in the viewport or the entire browser window.
Products Seen In This Post:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Hi! My name is Kevin Whipps, and I'm a writer and editor based in Phoenix, Arizona. When I'm not working taking pictures of old cars and trucks, I'm either writing articles for Creative Market or hawking stickers at Whipps Sticker Co.
View More Posts
