Chrome extensions every web developer must have 👨‍💻💯
Tags: webdev, productivity, extensions, tools
Published: 2022-08-13 20:46:00

Chrome extensions are handy tools that almost everyone who has a Chrome browser uses. These extensions can make it easier to perform tasks that normally require opening a new browser, performing a search, and clicking a few links and buttons.

Aside from their ease of use and convenience, most of these extensions are small in size and can perform tasks such as changing the browser's default behavior by introducing new functionality or modifying existing browser features, which developers find helpful.

This article will list and discuss chrome extensions that every developer should have. Let's get started.

## 1. Wappalyzer

![wappalyzer chrome extension screenshot](https://lh3.googleusercontent.com/TE5cGjbTbj_mqLFn1_IljQ8NkX8lZZNDJApijpuoug4FMd8g5EsoWjW8ZUcHnlclzo1KknI21_KUmckFNHUE3JCO0w=w640-h400-e365-rj-sc0x00ffffff)

One of the most popular extensions for detecting the technology behind a specific website is the content management system, Javascript libraries, frameworks, programming languages, payment processors, CDN, etc.

> Wappalyzer is a technology profiler that shows you what websites are built with.

[Install here](https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?gclid=Cj0KCQjwl92XBhC7ARIsAHLl9akU5zkjlBln0UOMXfef3Goxrgmy7xB55i09Z9FL8dXIo84H8MiyLF4aAj8yEALw_wcB)

## 2. Visual Inspector

![Visual inspector screenshot](https://lh3.googleusercontent.com/5ctTX5icGOHvE1xXGPBjhTMc9wLW_QuhKOgz9zN2Gn97RMCQzOcSe3HkrK9SqHTG6bfFJCKD3DyPj4HUleh8zmPvbg=w640-h400-e365-rj-sc0x00ffffff)

Visual Inspector shows a website's color palette, fonts, images, and CSS properties such as typography, gradients, opacity, font properties, etc

With it, you can change the design properties of a website without writing code, download CSS and images, change the theme, and do a variety of other things.

> Say hello to Visual Inspector - Delightful Chrome extension for designers to inspect / edit live web pages without coding.


[Install here](https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc)

## 3. SVG Grabber

![SVG grabber screenshot](https://lh3.googleusercontent.com/n_S0jXwIMs-P6T40VjlPh1cmMgYuMQbyBuqAd383TfB7XwYfOOI4MxiilxfSaBDL3Guga6fU5EX2jeMhbDNABtWHpg=w640-h400-e365-rj-sc0x00ffffff)

This extension, as the name implies, grabs SVG assets. This tool can copy or download all SVG images, icons, or illustrations from a website.

It is an open source tool that can be forked and downloaded from [GitHub](https://github.com/ngti/svg-grabber).

> Quickly preview and copy or download all the SVG assets from a website.


[Install here](https://chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg)


## 4. ColorZilla

![ColorZilla screenshot](https://lh3.googleusercontent.com/i_LD86JuaG2ipWrBiNcjtUFLfMzuFpEsEjBCG0aNnl2imoQAMmhdEDT70hQHfjpISngZA7u860pEJZrBPcX259UO=w640-h400-e365-rj-sc0x00ffffff)

ColorZilla is an eyedropper extension that allows you to pick and identify colors on a website. It is also a CSS gradient generator; it can retrieve a website's color palette, select colors at different zoom levels, and display element information such as class, id, size, tag name, and so on.

This extension is also available for Firefox and has received over 5 million downloads.

> Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies


[Install here](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)

## 5. Font Finder

![Font finder screenshot](https://lh3.googleusercontent.com/XMxuqXHEuAx7IhTUfjOUjaRmFjzdOm1AFqluaX6b40XNLl1ofxqKjNpHorxcKWwHUaiR2YhNOzxcjphwj0AuihSPGw=w640-h400-e365-rj-sc0x00ffffff)

Inspect and analyze a website's font to get CSS styles for the selected element such as color, font family, size, and so on.

[Install here](https://chrome.google.com/webstore/detail/font-finder/bhiichidigehdgphoambhjbekalahgha)

## 6. Lorem Ipsum Generator

![lorem ipsum generator screenshot](https://lh3.googleusercontent.com/owZQAViLvldS4umzvvVbb9016wXgMgaXfJlptTXuUHyXalwfzQf1PI1GaUefH_lz_Xx4ViQZSAsUma53LXSXMQp18g=w640-h400-e365-rj-sc0x00ffffff)

You can use this extension to generate dummy text in a specific number of paragraphs, sentences, or words. It remembers your most recent selection and provides quick shortcuts for copying and refreshing generated text.

> It's a open-source extension and this project made with VueJs by Anılcan Çakır.


[Install here](https://chrome.google.com/webstore/detail/lorem-ipsum-generator/leokkkfhnahnlmfkelibfigimkoinkfm)


## 7. Lighthouse

![Lighthouse extension screenshot](https://lh3.googleusercontent.com/F7ikgmKQrmoyHN4Xdmf7AoXI-tLGPyhRuymX8cZp9Xu-CoSxpyAmXQgKCToiuOFQOF9omSuIzBRz0ZHX0N4XsCXf4A=w640-h400-e365-rj-sc0x00ffffff)

Lighthouse, developed by Google, is an automated open source auditing tool for improving the performance and quality of websites and web apps. Lighthouse runs a series of tests and generates a report on how well the webpage performed. Then you will understand how to improve the performance of your website.

Feel free to checkout the [quick start guide](https://developers.google.com/web/tools/lighthouse) to get started with this extensions

[Install here](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)


## 8. Web Developer

![Web developer screenshot](https://lh3.googleusercontent.com/R-5Ljok-0LheK8d5fMW8akkrKk78zXZ1itUSpyd133LtptO1cQGdwuPB2Xm7d3zORUGjESb8u8FzYFPKvTnL1-Qo=w640-h400-e365-rj-sc0x00ffffff)

This tool adds a toolbar button to the browser that, when clicked, displays a list of tools organized into categories such as Cookies, Forms, Images, Miscellaneous, Resize, CSS, and Disable. And within each category is a plethora of tools that perform various tasks.

[Install here](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)


## 9. JSON Viewer Pro

![JSON Viewer Pro screenshot](https://lh3.googleusercontent.com/gWjQ7NG2CsKlflCX53nXmpm0VzkPdhYZNX5c6j52yRuJjOc7lxYSl9DtLvIGvtxr2_ylnPtEsiyYbHKfebYBaqhQ=w640-h400-e365-rj-sc0x00ffffff)

A free extension beautifies and visualizes JSON responses or data in a tree or chart view. You can use this extension to write custom JSON, import a local JSON file, download a JSON document, and many other things.

[Install here](https://chrome.google.com/webstore/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc)


## 10. Responsive Web Design Tester

![Responsive webpage tester screenshot](https://lh3.googleusercontent.com/lVhgW4071_Ol-p26bhUtg1_AaqeRicQ_PD-VoSz6eQD5hF7aGkxWWP7BuD2Cbn2RErzYu9cBUR-zkjTJ2FihIE-e=w640-h400-e365-rj-sc0x00ffffff)

A tool for quickly testing the responsiveness of a website. It includes a variety of devices with varying screen sizes and user agents, allowing you to see how your website appears and responds to different devices. You can include your custom device sizes and types.

[Install here](https://chrome.google.com/webstore/detail/responsive-web-design-tes/enhcpefphhaiikpobimgcakinhabgiib)


## Conclusion

That concludes this article. Thank you for reading. I hope you found it beneficial.