{"id":47407,"date":"2017-09-01T08:38:30","date_gmt":"2017-09-01T15:38:30","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=47407"},"modified":"2024-04-16T06:50:02","modified_gmt":"2024-04-16T13:50:02","slug":"web-designer-chrome-extensions","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions","title":{"rendered":"26 Chrome Extensions for Web Designers"},"content":{"rendered":"

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<\/a>, but you get the idea.\nWith 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.\n

<\/span>Awesome Screenshot<\/a><\/span><\/h2>

\nEver need to record a screencast? Or maybe you want to do a screenshot of a webpage, but one of the entire<\/em> 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.\n<\/p>

<\/span>RemoveCookiesForSite<\/a><\/span><\/h2>

\nWant 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.\n<\/p>

<\/span>BuiltWith<\/a><\/span><\/h2>

\nEver 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.\n<\/p>

<\/span>PerfectPixel<\/a><\/span><\/h2>

\nSometimes 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?\n<\/p>

<\/span>CSS Peeper<\/a><\/span><\/h2>

\nCSS 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.\n<\/p>

<\/span>Full Page Screen Capture<\/a><\/span><\/h2>

\nOK, 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.\n<\/p>

<\/span>Grammarly<\/a><\/span><\/h2>

\nAs 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.\n<\/p>

<\/span>Google Font Previewer<\/a><\/span><\/h2>

\nSometimes 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.\n<\/p>

<\/span>Stylebot<\/a><\/span><\/h2>

\nStylebot 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.\n<\/p>

<\/span>ColorZilla<\/a><\/span><\/h2>

\nPicture 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.\n<\/p>

<\/span>Flat Colors Guide<\/a><\/span><\/h2>

\nFlat 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.\n<\/p>

<\/span>tab packager<\/a><\/span><\/h2>

\nIf 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.\n<\/p>

<\/span>Instant Wireframe<\/a><\/span><\/h2>

\nThink 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.\n<\/p>

<\/span>Responsive Web Design Tester<\/a><\/span><\/h2>

\nWeb 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.\n<\/p>

<\/span>Dimensions<\/a><\/span><\/h2>

\nWant 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.\n<\/p>

<\/span>Page Ruler<\/a><\/span><\/h2>

\nI 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.\n<\/p>

<\/span>Perfmap<\/a><\/span><\/h2>

\nHeatmaps 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.\n<\/p>

<\/span>45to75<\/a><\/span><\/h2>

\nWriting 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.\n<\/p>

<\/span>Resolution Test<\/a><\/span><\/h2>

\nResolution 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.\n<\/p>

<\/span>Eye Dropper<\/a><\/span><\/h2>

\nJust 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.\n<\/p>

<\/span>Web Developer<\/a><\/span><\/h2>

\nThis 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.\n<\/p>

<\/span>Image Downloader<\/a><\/span><\/h2>

\nI use this one personally, and I love it. Click the extension and it pulls out all of the images on the page and<\/em> 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.\n<\/p>

<\/span>WhatFont<\/a><\/span><\/h2>

\nWait, haven’t I talked about this before?<\/a> 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.\n<\/p>

<\/span>Check My Links<\/a><\/span><\/h2>

\nDo 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.\n<\/p>

<\/span>Chrome Daltonize!<\/a><\/span><\/h2>

\nI 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.\n<\/p>

<\/span>Window Resizer<\/a><\/span><\/h2>

\nHere’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.\n<\/p>

Products Seen In This Post:<\/strong><\/p>
<\/figure>\n
<\/figure>\n \n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":89,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[61],"topics":[],"class_list":["post-47407","post","type-post","status-publish","format-standard","hentry","category-creative-inspiration","tag-design"],"acf":[],"yoast_head":"\n26 Chrome Extensions for Web Designers - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"26 Chrome Extensions for Web Designers\" \/>\n<meta property=\"og:description\" content=\"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?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-01T15:38:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-16T13:50:02+00:00\" \/>\n<meta name=\"author\" content=\"Kevin Whipps\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin Whipps\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/web-designer-chrome-extensions\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/web-designer-chrome-extensions\",\"name\":\"26 Chrome Extensions for Web Designers - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"datePublished\":\"2017-09-01T15:38:30+00:00\",\"dateModified\":\"2024-04-16T13:50:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e1bedbb0cb22aaa056fc5b9e218cd6c\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/web-designer-chrome-extensions#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/web-designer-chrome-extensions\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/web-designer-chrome-extensions#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"26 Chrome Extensions for Web Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"26 Chrome Extensions for Web Designers - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions","og_locale":"en_US","og_type":"article","og_title":"26 Chrome Extensions for Web Designers","og_description":"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?","og_url":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2017-09-01T15:38:30+00:00","article_modified_time":"2024-04-16T13:50:02+00:00","author":"Kevin Whipps","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Kevin Whipps","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions","url":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions","name":"26 Chrome Extensions for Web Designers - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"datePublished":"2017-09-01T15:38:30+00:00","dateModified":"2024-04-16T13:50:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/7e1bedbb0cb22aaa056fc5b9e218cd6c"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/web-designer-chrome-extensions#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"26 Chrome Extensions for Web Designers"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/47407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=47407"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/47407\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=47407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=47407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=47407"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=47407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}