DEV Community


Chrome Extensions Every Frontend Developer And Designer must have.

gautham495 profile image Gautham Vijayan ・2 min read

In this tutorial I am gonna list the chrome extensions you must absolutely have.

Whenever you enter a new website and get fascinated by how well the frontend developer has designed it, the color selection, the font family and its size, you have to go to devtools to know what are they.

1. What-font?

This one will help you tell what is the font of the particular text in the website by clicking on the extension and then clicking on the text for which you want to know what font is used.

recording (2)

2. CSS-peeper

This is another superb chrome extension for frontend developers especially for web designers who want to know about the beautiful colors used by the website, its font and also its css properties like padding and margin,the total size of CSS file and a lot more. Its feels like chrome devtools.

recording (3)

3. Wappalyzer

Another superb tool to know whether the website uses Wordpress, React or ruby on rails or whatever the tech stack the website uses.

recording (4)

And thats all for the frontend developer and designer chrome extensions I use and you must surely have them!

My Personal Experience:

I mostly use the WhatFont when I visit a website which has a different font which I have not seen in other places and copy and paste that font name in google fonts and bookmark it for future use. And I use CSS peeper when I want to know about the hexcodes of the colors used in the website.

Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading later.

My Other Articles:

Discussion (1)

Editor guide
adilvelizade0 profile image
Adil Velizade

Please follow instagram : @master_javascript