Screenshot of Chrome Browser with activated extensions

10 Chrome Extensions for Web Designers (and Developers)

We all know how hard web design can get sometimes, so I decided that it was about time for me to share with you these 10 Chrome extensions that will make your work as a designer way easier.

With these tools, you will save a lot of time, especially if you need to gather information about an existing website, or if you need to test the design once your website is online.

1.- WhatFont

WhatFont allows you to know all the attributes of any font on a website with only one click.

2.- Full Page Screen Capture

So far, the best screen capture for websites that I have tried. It allows you to print the full screen and export it as an image or pdf file.

3.- ColorZilla

ColorZilla allows you to pick any colour on a website with one click, copying the HEX code to your clipboard. But the features of this amazing tool do not stop here. It has a colour history, shows you the RGB and HSL codes, and also includes a CSS gradient generator that can come up in handy.

4.- Stylebot

I would need more than one blog post to explain how many times Stylebot turned out to save me a lot of time. It will allow you to change any CSS style of an element on a webpage, without having to type any code, and by only clicking on the element. I use it a lot as a preview of changes when I do not have the source file of the original design or when a lot of changes were done directly on the code.

It also has an interesting feature: Once you do the modifications you want, you can copy and paste the code. How amazing is that?!

5.- CSSViewer

Much simpler than Stylebot, you only need to hover on an element to get all the information about the CSS. It does not allow to make changes, but it can be useful when you cannot find something in the code or you need to know which CSS class is applied to something.

6.- WEb developer checklist

Any website designer knows how important is to keep the best practices when designing a website. WEb developer checklist analyzes any website and gives you information about broken links, spelling and grammar, analytics, SEO, usability, accessibility, performance and much more.

7.- Page Ruler Redux

With page ruler, you can find out the size and position of an element inside a website. Just click the icon and draw a square in the element you want to measure. Simple as that: all the information will appear on the top of the page.

8.- Dimensions

A bit simpler than Page Ruler, but also interesting. When clicking on the icon of Dimensions, your cursor will transform into a cross that will measure the dimensions from your mouse pointer up/down and left/right until it hits a border. It is perfect to measure distances between elements on a website.

9.- Color tab

Color tab is not exactly a tool, but it will show you a different colour palette every time that you open a new tab in your browser. Ideal for inspiration! Also, you can copy the HEX code of any of its colours with one

10.- Grammarly

This is not a design tool either, but we all know how important is to make a good impression when it comes to written communication. Grammarly checks your grammar and spelling, integrates perfectly with the browser, and its free version is enough to check emails and Drive documents (and even Facebook posts).

And that is, these are the 10 Chrome extensions I cannot live without. I hope they will be useful for you as well!