30 browser extensions every developer should have
Tags: webdev, beginners, tutorial, extension
Published: 2022-02-04 14:17:45

The browser is a developer's most powerful tool. 99% of people don't make 100% out of their browsers.
Here are 30 browser extensions to make the most out of the app you probably spend the most time on.

## 1. [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)

The easiest way to identify fonts on web pages.


## 2. [WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=en)

Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.

## 3. [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)

Adds a toolbar button with various web developer tools.

## 4. [Daily.dev](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied)

Get programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers!

## 5. [JSONView]( https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en)

Validate and view JSON documents.

## 6. [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en)

Resize the browser window to emulate various screen resolutions.

## 7. [JSONLite](https://github.com/lauriro/json-lite)

Browser extension for viewing JSON files.

## 8. [Responsive Viewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en)

Show multiple screens once, Responsive design tester

## 9. [BrowserStack](https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb?hl=en)

Instantly test your webpage on any desktop or mobile browser.

## 10. [Awesome Screenshot](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en)

Full page screen capture and screen recorder - 2 in 1. Share screencast video instantly

## 11. [Visbug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en)

Open source web design debug tool built with JavaScript

## 12. [Keyframes](https://chrome.google.com/webstore/detail/keyframes/dalaiblmpeklkjnpeocmaojcfldmbfck?hl=en)

In-browser CSS Animation creator.

## 13. [Kontrast](https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk?hl=en)

Quickly check and adjust contrast in real-time in your browser to meet WCAG 2.1 requirements

## 14. [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)

Adds a semi-transparent image overlay over the top of the developed HTML to easily perform pixel perfect comparison between them, useful for replicating UI designs.

## 15. [Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh)

Inserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts.

## 16. [Site Pallete](https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh)

A must-have tool for designers and frontend developers to grab colors for any website.

## 17. [Responsive Design Tester](https://chrome.google.com/webstore/detail/mobileresponsive-web-desi/elmekokodcohlommfikpmojheggnbelo)

Test responsive web designs or mobile pages that detect specific user agents. Test multiple devices at the same time!

## 18. [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)

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

## 19. [Lorem Ipsum Generator](https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb?hl=en%20)

Provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can be customized.

## 20. [Code Beautifier](https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald?hl=en)

Beautify CSS, JavaScript and JSON code when you open a .css/.js/.json file


## 21. [Imageye](https://chrome.google.com/webstore/detail/imageye-image-downloader/agionbommeaifngbhincahgmoflcikhm)

Find and download all images on a web page. With Imageeye you can find, browse and download all the images present on a web page.

## 22. [Stylebot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)

Change the appearance of the web instantly.

## 23. [Colorpick](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

## 24. [React Dev tool](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

React debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

## 25. [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)

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

## 26. [Fake Filler](https://chrome.google.com/webstore/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo)

Fake Filler is a form filler that fills all inputs on a page with fake/dummy data.

## 27. [Page Ruler Redux](https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal)

A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page.

## 28. [Web Editor](https://chrome.google.com/webstore/detail/web-editor/pdmlhckofhkhebmcplblcijijgjiakcm)

The web editor is the tool that provides you with an enhanced way to inspect any website elements, alter their properties, insert contents, design, and visualize the way you want to see them.

## 29. [CSS Viewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce)

A simple CSS property viewer.

## 30. [Font Ninja](https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh)

Identify fonts from any website, bookmark, try, and buy them.

### Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news.

[Abhiraj's Dev-letter](https://newsletter.abhiraj.co)