5 Chrome Extensions every front-end developer must use

5 Chrome Extensions every front-end developer must use

Google chrome is a very popular browser among the users & even among the web developers. The chrome also has a huge community for its extensions that extend the default functionalities of the browser to a huge extent. Being a web developer, I use some Chrome extensions a lot.

In this article, I will list some really useful extensions that every Frontend Web developer must use. The listing starts with:

1. ColorZilla

Download here

This is a really helpful tool when it comes to working with colors. It helps us easily pick up the color with just a click. The color gets copied to the clipboard as well to be used directly.

It saves a lot of time by preventing the developer to open inspector tools to find out the color which usually takes at least 10-20 seconds & with colorzilla, it is just two clicks away: 1st to open color picker & 2nd to pick the color

colorzilla plugin usage

2. Pesticide

Download here

When creating pixel perfect web pages, there usually comes some issues with the box-sizing of the element & its positioning. Pesticide is a layout based tool that outlines the sides of the elements so that a developer can work on modifying the structure to a pixel-perfect level.

pesticide plugin usage

3. Page Ruler

Download here

When creating pixel perfect web pages, there also exists the priority to define the height & width of some common elements. Page ruler lets you drag a rectangular block anywhere over the browser giving the width & height of the rectangular block in pixels. This can be useful when we want to create specific sized elements, or identifying the distance between two elements, or in some similar cases.

page ruler plugin usage

4. HTML5 Storage Manager All in One

Download here

A web developer generally deals a lot with working on local storage & session storage. This extension eases the trouble of checking the current values by getting their values from the chrome inspector console. Instead, it shows the current values in the local storage & session storage in a popover. It also allows adding, delete, modify a value with ease & simple user interface.

html all in one plugin usage

5. WhatFont

Download here

This is also a really handy chrome extension. It allows you to easily identify what is the font by simple hover gesture. Just enable the extension by clicking the icon & hover over the text block to identify what font it uses. It saves the additional efforts of inspecting the font used for a text block thus saving significant time when it comes to identifying multiple fonts on a website.

whatfont plugin usage


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.