Mohamed Atef

11 Mar 2021

Top Google Chrome extensions every web developer / designer should have



Welcome to, every developer and design should have helper tools in their browser to make their work more accurate & more professional, today I am going to provide you a package of important Google Chrome extensions all of them are super easy to use, 
Let's find out! :)

1- WhatFont

WhatFont is one of the most important google chrome extensions which you should install to recognize the Font family, Font size, Font weight, Line height, Text color which elements are using all you need to start using this extension is adding it to your browser through this link from Chrome web store 
How to use this Extention?
You need to just click on the Icon and your cursor will be like an indicator then you will put your mouse on the text or the element which you want to check like the image below 


GoFullPage is an amazing Google Chrome extension will make you able to take a screenshot of the entire page in one click only this extension will be useful if you want to show your website to your client or you want to save an image of the website to add it into your CV, you can install this extension from here using Chrome web store 

3- CROS Unblock

CROS Unblock is a necessary Google Chrome extension that you will need to have if you generate or use Ajax or Axios or Any frontend request on the browser while you are developing your Website when you active this Google Chrome extension your browser will skip the CROS error 

If you active the extension and you will seeing the error you should know that this error is comming from the backend server or you will need to add ‘access-control-allow-origin’ into the header of the request 

4- ColorZilla

ColorZilla helps web developers & designer to recognize the color by switching the mouse Cursor to be like a magnifying glass with auto color recognizer it's one of the best ways to recognize the colors in any webpage you can install it from here 

If you want an alternative you can use the developer tools by pressing on F12 & for Max by pressing on Command + Shift + I  or Option + ⌘ + J then you can write a color property in CSS like the image below, then click on the color beside the HEX code , it will open a Color picker & then you can move your mouse through the page to copy the HEX code of any color you want 

5- Page ruler redux 

Page ruler redux helps you to Measures the spacing in the webpage easily especially in the complex layout because the simple layout you can use dev tools to know the margins & padding of each element but when you start using line-height with padding & margin and positions in CSS it's gonna be harder to use developer tools 


No Comments to show

© 2023 Copyrights reserved for