Clear Cache, JSONView, and more

Harsha Vardhan

Follow

Nov 21, 2020 · 4 min read

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!