Blog

10 best chrome extensions for frontend developers
2019-07-06 | by SyntaxLogics

10 Best Chrome Extensions for FrontEnd Developers

Google chrome is surely the most popular browser, with these top 10 chrome extensions it will be even more useful. Here I’m going to uncover the best chrome extensions for front-end developers. These top chrome extensions are lifesavers for every designer.

In 2019 there are a variety of different extensions available in google chrome’s web store following are the best chrome extensions in 2019 so far.


1 - ColorZilla

It is an advanced color picker tool through which you can easily get color combinations in both Hex Color Code and RGB Color Code of any webpage. ColorZilla is very similar to the Eyedropper tool that we use in different graphic designing software like adobe photoshop, illustrator, CorelDraw, etc.

It also saves the history of your picked colors. With these awesome features ColorZilla is definitely number one in top 10 chrome extensions

top chrome extensions

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp


2 - Behind The Overlay

It is a must-have extension, whether you are a designer or not. We all have this issue that we visit a website for a specific purpose, but the website displays a popup overlay that may be of the registration/login form, newsletter subscription or ads and does not have any close button these websites force a user to register, subscribe or wait for some seconds but with this behind the overlay chrome extension we can easily block these overlay popups. Behind the Overlay is one of the best chrome extensions.


Behind The Overlay


https://chrome.google.com/webstore/detail/behindtheoverlay/ljipkdpcjbmhkdjjmbbaggebcednbbme


3 - Full Screen Page Capture

It is a full web page capturing tool. There are many other top chrome extensions are available for this purpose, but as far as our experience this is the best of them all, it can manage websites with sticky navbar or these sorts of things and give us a full web page view as it should.

We can also download, screenshots in PDF and PNG formats.


Full Page Screen Capture


https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl


4 - Page Marker

This extension is very useful as we need to mark specific information on a web page. Page Marker is one of the best chrome extensions in 2019. We can easily draw anything on a web page, we are visiting with this extension.

We can choose the color and size of our choice. The best thing is we can download the screenshot with our marks on it.

Page Marker

https://chrome.google.com/webstore/detail/page-marker/jfiihjeimjpkpoaekpdpllpaeichkiod


5 - Page Ruler

It is a lifesaver extension for a web designer. Page Ruler is simply the best among other chrome extensions for frontend developers. A web designer can easily set the alignment of a web page he is working on.

We can draw a ruler to get dimensions (width - height) and position (top, right, bottom, left) of a web page element.


Page Marker

https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme


6 - Scrollbar Customizer

Don't like your scrollbar with the scrollbar customizer chrome extension you can change its dimension and color. In this extension, we can create our own scrollbar or choose from preset scrollbar's available in it.


Scrollbar Customizer


https://chrome.google.com/webstore/detail/scrollbar-customizer/flffekjijpabhjgpoapooggncnmcjopa


7 - Shift Click Image Extractor

It is an image extractor extension. Suppose you are visiting a website and want to download an image from that web page but the website has disabled the default right click and save image functionality, in that case, shift click image extractor is very helpful just press shift and click on that image and the image will be open in a new tab and can be downloaded easily.


Shift Click Image Extractor

https://chrome.google.com/webstore/detail/shift-click-image-extract/aonflkdebcjkiimklgpgkclmjohclbbf


8 - ViewPort Dimension

As a web designer, we have to make a web page responsive for each and every possible dimension. For this purpose what we usually do is we resize our browser's window and check our web page.

Viewport Dimension shows an indicator of current dimension (width and height) so we easily set our CSS media queries accordingly, We can also set the position of the indicator according to our easiness.


Scrollbar Customizer


https://chrome.google.com/webstore/detail/viewport-dimensions/kchdfagjljmhgapoonapmfngpadcjkhk


9 - CSS Used

Looking for best chrome extensions for frontend developersEver want to get the CSS of a particular section or element of a website? CSS used is the tool we all need. CSS Used is a developer tool that we can see in our chrome developer panel after installing.  

Scrollbar Customizer


https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff


10 - WhatFont

It is a popular chrome extension that is used to identify fonts used on a website. As a front-end developers, we have been told by our clients to use a font, used on a specific website and sometimes it becomes very difficult to identify the font.

With WhatFont you just have to select and hover the text you want to identify. WhatFont also identifies the services used for example google fonts etc


Scrollbar Customizer


https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en