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:
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
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.
3. Page Ruler
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.
4. HTML5 Storage Manager All in One
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.
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.