I appreciate Chrome extensions. They allow me to carry out frigid tiny 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. choose out cookies? Extension. Find a font? Well I’ve already covered that one, but you gain the thought.
With all that in mind, I attach 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 reach in handy.
Ever need to record a screencast? Or maybe you want to carry out 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 reach in handy.
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.
Ever examine at a frigid website and believe, “I wonder what they used to build that site?” Well, BuiltWith will bid 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 earn it happen, and whether or not you want to expend them in your own project.
Sometimes things shift around a bit in the time when you recede from designing a website to when it’s coded. PerfectPixel lets you attach a semi-transparent image overlay on top of the final HTML product, and then you can compare the two pixel by pixel. believe about how handy that would be, hmm?
CSS can be fun, but if you want to find out what another site did, you occupy to start hunting down things through a bunch of code. Instead, CSS Peeper can demonstrate you line-heights, fonts, buttons sizes and more on any particular site, and then allow you to inspect that code to rupture down what you can expend on your own page.
OK, this one is simple. Full Page Screen Capture lets you choose a screenshot of an entire webpage, not just what’s visible on the screen. So, should you want to occupy a shot of this handsome article good here, you could gain it in its entirety just by using this extension. You’re welcome.
As a former copy editor, I occupy 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 recede. And since it’s everywhere your browser can recede, that means it works on Gmail just as well as it does on Facebook.
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 attach that on the webpage itself, or on a CSS selector. That way, you can quickly bounce between fonts and see what works best.
Stylebot has a tiny 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.
Picture the eyedropper from Photoshop being in every webpage, and that’s ColorZilla. You can expend it to pull color readings from anywhere in the browser, which will give you the hex code so that you can expend 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 gain you into some concern.
Flat colors are all the rage, and if you want to see some options, this is a worthy one. Click the extension and see all of the different colors you can choose from, plus their hex codes.
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 appreciate to expend that just when I switch between machines, or even devices.
believe about the time you could save if you could carry out a wireframe from any website instantly. It could give you ideas or a starting point for your next gigantic 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 expend.
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.
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 lumber it to the next element and find out the distance. Easy as pie.
I appreciate extensions that benefit 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 expend those to determine the size of the different components. You can even outline elements on the page with Element Mode.
Heatmaps are worthy, 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 bid you the load time for the entire page.
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 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. believe about how handy that one will reach in when those modern devices drop.
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.
This one is frigid 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.
I expend this one personally, and I appreciate 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.
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, good? 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.
carry out all the links on your website work? Check My Links will carry out just that — and the ones that work will demonstrate up in green, while the ones that don’t are highlighted in read. It’s straightforward and simple, which is my kind of extension.
I don’t know about you, but I believe about how differently abled people view the work I carry out all the time. Chrome Daltonize! shows details to colorblind users, that way they can see what they wouldn’t occupy seen otherwise. By using it yourself, you can adjust your colors so that the colorblind can see them all the time.
Here’s another worthy 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 expend all the time. You can also view the modern resolution in the viewport or the entire browser window.
Products Seen In This Post: