DEV Community

loading...
Cover image for Best Chrome Extensions you should have as a web developer

Best Chrome Extensions you should have as a web developer

Aman Kumar Jagdev
Passionate Full Stack Developer ✌🏻
・3 min read

Getting Started

πŸ‘‹πŸ» Hey Swift Readers, to keep it simple for you, you can skip the introduction and directly jump to extensions by clicking here

Introduction

I have been doing web for quite a time now, and like every other web developer, most of my time is spent on my browser(Chrome) and my code editor(VS Code).
As we all know most of us use Chrome 🌐 or some sort of Chromium-based daily, and extensions are something that can really improve the experience while using it. I always looked for interesting extensions to improve my productivity as a web developer and here are some which I found quite useful.


Extensions

So, I have compiled a shortlist of Chrome extensions that I use regularly to increase productivity as a web developer. ✌🏻

Click on the links below to jump to a particular extension
These extensions can be installed on any chromium-based browser.

Major browser which supports these extensions is Chrome, Microsoft Edge (Chromium-based version), Brave and Chromium itself.


WhatFont

Download

What it does?

This allows you to easily identify fonts present on a web page. It presents you with a beautiful one-click simple UI to inspect fonts, giving you all the required information about a font such as name, size, family, weight, etc.

WhatFont in Action

WhatFont in Action

GitZip

Download

What it does?
This extension allows you to directly download files and sub-directories of a GitHub repository as zip, without having to clone or download the whole project.

GitZip in Action

GitZip in Action

React Developer Tools

Download

What it does?

This helps you to inspect your React components and their state inside the Chrome dev tools. It can be accessed in the new tabs in Chrome Dev Tools "βš›οΈComponents" and "βš›οΈ Profilerβ€œ, which will be added after installation.

React Developer Tools in Action

React Developer Tools in Action

JSON Formatter

Download

What it does?

It helps you to beautify & format JSON with Syntax highlighting which makes it easier to read.
For example Responses in the form of JSON from an API.

JSON Formatter in Action

JSON Formatter in Action

Cookie-Editor

Download

What it does?

This is a fast and easy-to-use cookie manager for your sites, you can easily delete, edit, search, add, protect and block cookies on your site. You can even import and export them in JSON format.

Cookie-Editor in Action

Cookie-Editor in Action

ColorZilla

Download

What it does?

This extension helps you to extract a color reading from any point in your webpage. It provides you with an advanced eyedropper tool providing you with hex code of the color and other information.

ColorZilla - Colorpicker in Action

ColorZilla - Colorpicker in Action

Moreover, you can also use the inbuilt color picker in power toys (if you are on windows).
To check out more interesting windows productivity tools, go to Top Windows apps to boost your productivity


What's next?

First and foremost, thank you for reading. If you've made it this far, leave a reaction to show your support!

Furthermore, feel free to leave a comment with any additional chrome extensions that you use on a regular basis, and let's have a healthy discussion over there. πŸ˜„

Discussion (1)

Collapse
devanshsinghparmar profile image
Devansh Singh Parmar

Cool