5 Must-Have Chrome Extensions for Web Developers

The job of a web developer is seldom easy. In simple words, the primary job requirement of a web developer is to ‘bring alive’ a web application. To achieve this almighty feat, web developers have to do everything from writing strenuous JavaScript code, which should result in users not waiting for more than 10 seconds for the web page to load, to writing CSS styles that would make the user fall in love with the UI.

At Eugenie, our job as web developers is to make something as complex as Machine Learning and Artificial Intelligence look as simple as applying butter to the bread.

Thanks to several terrific extensions for the Google Chrome browser, the tedious work of web development is grossly simplified. In the following article, you will look at the top 5 Google Chrome Extensions that help us, at Eugenie, build brilliant UI.

By all means, download these Chrome extensions that can help you build great UI:

1. Site Palette:

Overview: Site Palette helps you generate the perfect color palette for your web page. You can open any web page for inspiration and click on this extension to fetch the entire web palette for that website that you can also, share and edit.

Motivation: One of the most significant tasks for a front-end developer is to generate a color theme or a color palette which not only promotes the brand of the web page but also makes it intuitive and soothing for all the users. Site Palette boasts of a brilliant UI in itself, to help you achieve that.

Users: 50,000+ (as of, September 2020)

 

 

You can check out Site Palette here.

2. CSSViewer:

Overview: View the CSS of any element by simply hovering over it.

Motivation: There might always be a scenario where you found something excitingly cool on a web page, and you are curious to view the CSS behind it. Henceforth, you no longer need to open the Element Inspector to fetch the CSS of an element. Thanks to the handy CSSViewer plugin, all you need to do is to hover over the element to view its CSS.

Users: 100,000+ (as of, September 2020)

 

 

You can check out CSSViewer here.

3. WhatFont:

Overview: View the font used on any element of a web page by simply hovering over it.

Motivation: If you eagerly need to find out the various fonts used to build a brilliant web page that you might have come across, WhatFont is the perfect extension to help you achieve that. You no longer need to open the Element Inspector and crawl through the properties to find the font. By simply hovering over a text, it will give you in-depth details about the font.

Users: 70,000+ (as of, September 2020)

 

 

You can check out WhatFont here.

4. ColorZilla:

Overview: With over 2,000,000+ users as of September 2020, ColorZilla is the most popular color-picker extension on Chrome. ColorZilla comes with a built-in eyedropper that helps you get the color of any pixel on the web page. Additionally, it comes with an advanced color picker which is similar to the one you can find on Photoshop, a CSS Gradient generator, a color palette generator for any site, amongst many others.

Motivation: It’s very difficult to replicate an exact shade of color that you might have come across on a web page. There might be times when the particular color you desire is a part of an image and it’s not possible to procure it. It’s for times like these where ColorZilla is very useful.

Users: 2,000,000+ (as of, September 2020)

 

 

You can check out ColorZilla here.

5. Spectrum:

Overview: This tool helps you test your web page for color vision deficiency.

Motivation: One of the golden rules of web development is that you should follow the principles of accessibility. It means your website should be accessible by all kinds of users irrespective of their physical abilities or environment. Spectrum is one such tool which helps you understand how your web page will look to users who are partially color blind, and the users who have color vision deficiency.

Users: 20,000+ (as of, September 2020)

 

 

You can check out Spectrum here.