10 Must Have Chrome Extensions for Front-End Developers

Clear Cache, JSONView, and more

Harsha Vardhan
Nov 21, 2020 · 4 min read
google chrome logo
google chrome logo
Google Chrome logo

Most of the Web Developers use Chrome for their development. According to Wikipedia about 65% of the world population seem to use Chrome, this is one of the reasons why developers choose Chrome to test an application built by them. So if you’re a developer who uses Chrome a lot, here’s a bunch of Chrome extensions that would make your life a lot easier.

1. Colorzilla

Colorzilla basically provides a color picker widget along with a lot of other features. It has a gradient generator, webpage code analyser, and everything you’d need to deal with colors in your webpage. It is available in Firefox as well.

screenshot
screenshot
Colorzilla extension in use

2. CSS Viewer

This tool shows all the CSS properties associated with the element that we hover over with the cursor. It is a floating panel that has all the details such as the Font, Colors, Positioning, and so on. It also lets you copy the CSS easily.

screenshot
screenshot
CSSViewer extension in use

3. WhatFont

It’s the easiest way of finding out the fonts present on a webpage. As you can see from the picture below, when the extension is selected if you move your mouse cursor over a text it would show the font of the text.

screenshot
screenshot
WhatFont extension in use

4. Clear Cache

Clear Cache is a one-click solution for clearing out cache data and other browser stored information. With this extension, you don’t have to go over multiple popups and browser settings and you will only be away by a single click from clearing all the data.

screenshot
screenshot
Clear Cache extension in use

5. JSONView

JSONView pretty prints responses that are of type application/json. Any JSON when it is not viewed in its tree view, it’s very tough to read and understand. Here’s where JSONView would come in handy.

screenshot
screenshot
When JSONView is disabled
screenshot
screenshot
When JSONView is enabled

6. React Developer Tools

If you’re a react developer then this is a must-have extension. It helps you view and inspect the components hierarchy along with the props and states associated with them. It also helps you change the props or states if needed for the purpose of debugging.

screenshot
screenshot
React Developer Tools extension in use

7. Ember Inspector

Ember Inspector is a tool that can be used for debugging Ember applications. It shows the routes, models, components, and all other ember elements present in an Ember application. It also loads all the ember store data so that you can view them with ease. And, to understand what this extension does better do check it out.

screenshot
screenshot
Ember Inspector extension in use

8. Web Developer

Web Developer makes a programmer’s or a designer’s life a lot easier by providing a lot of other needed features in browser DevTools. It helps in manipulating images, changing page layouts, displaying rulers, outlining the elements present, and so on.

screenshot
screenshot
Web Developer extension in use

9. jQuery Audit

This extension creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects. It’s used for auditing jQuery’s delegated events, data, and much more.

screenshot
screenshot
jQuery Audit extension in use

10. Meta SEO Inspector

This extension is used for finding the metadata present inside a page that’s usually not available while browsing. Metadata is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links, and so on. It helps in revealing a few of the interesting site properties.

screenshot
screenshot
Meta SEO extension in use

Conclusion

The above-mentioned extensions make my life easier as a front end developer and these are my personal favourites. If there are any other extensions that help you a lot more than this, drop a comment.

Thanks for reading!

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Harsha Vardhan

Written by

Engineer, Photographer, Tech Blogger. Builds products and writes for developers. I love to code and love to help others code :)

Better Programming

Advice for programmers.

Harsha Vardhan

Written by

Engineer, Photographer, Tech Blogger. Builds products and writes for developers. I love to code and love to help others code :)

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store