Best Chrome Extensions you should have as a web developer
Tags: productivity, webdev, development, extensions
Published: 2021-05-07 12:57:11

# Getting Started

👋🏻 Hey **Swift Readers**, to keep it simple for you, you can skip the introduction and directly jump to extensions by [clicking here](#extensions)

# 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.

---

<a name="extensions"></a>

# 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**](#whatfont)
-   [**GitZip**](#gitzip)
-   [**React Developer Tools**](#react_developer_tools)
-   [**JSON Formatter**](#json_formatter)
-   [**Cookie-Editor**](#cookie_editor)
-   [**Color Picker – ColorZilla**](#colorzilla)

---

<a name="whatfont"></a>

## WhatFont

**_Download_**

-   [WhatFont | Chrome Web Store](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)

**_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.

<br/>

![WhatFont in Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l35kz18hznccw7n1yp8b.png)

<figcaption> WhatFont in Action </figcaption>

---

<a name="gitzip"></a>

## GitZip

**_Download_**

-   [GitZip | Chrome Web Store](https://chrome.google.com/webstore/detail/gitzip-for-github/ffabmkklhbepgcgfonabamgnfafbdlkn?hl=en)

**_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.

<br/>

![GitZip in Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isvory428gx78qqmc6k9.png)

<figcaption> GitZip in Action </figcaption>

---

<a name="react_developer_tools"></a>

## React Developer Tools

**_Download_**

-   [React Developer Tools | Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

**_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enza5v3naw3g2hesk6lh.png)

<figcaption> React Developer Tools in Action </figcaption>

---

<a name="json_formatter"></a>

## JSON Formatter

**_Download_**

-   [JSON Formatter | Chrome Web Store](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en)

**_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66626z40ygcux4gx0596.png)

<figcaption> JSON Formatter in Action </figcaption>

---

<a name="cookie_editor"></a>

## Cookie-Editor

**_Download_**

-   [Cookie-Editor | Chrome Web Store](https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm?hl=en)

**_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycbl5z9xx8voev1vzy83.png)

<figcaption> Cookie-Editor in Action </figcaption>

---

<a name="colorzilla"></a>

## ColorZilla

**_Download_**

-   [ColorZilla | Chrome Web Store](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related)

**_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0phc8t9476fw131v306.png)

<figcaption> ColorZilla - Colorpicker in Action </figcaption>

> 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](https://dev.to/amanjagdev/top-windows-apps-to-boost-your-productivity-3068)

---

# 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. 😄