30 browser extensions every developer should have

30 browser extensions every developer should have

Play this article

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

The easiest way to identify fonts on web pages.

2. WhatRuns

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

3. Web Developer

Adds a toolbar button with various web developer tools.

4. Daily.dev

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

Validate and view JSON documents.

6. Window Resizer

Resize the browser window to emulate various screen resolutions.

7. JSONLite

Browser extension for viewing JSON files.

8. Responsive Viewer

Show multiple screens once, Responsive design tester

9. BrowserStack

Instantly test your webpage on any desktop or mobile browser.

10. Awesome Screenshot

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

11. Visbug

Open source web design debug tool built with JavaScript

12. Keyframes

In-browser CSS Animation creator.

13. Kontrast

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

14. PerfectPixel

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

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

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

17. Responsive Design Tester

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

18. ColorZilla

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

19. Lorem Ipsum Generator

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

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

21. Imageye

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

Change the appearance of the web instantly.

23. Colorpick

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

24. React Dev tool

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

25. Wappalyzer

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

26. Fake Filler

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

27. Page Ruler Redux

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

28. Web Editor

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

A simple CSS property viewer.

30. Font Ninja

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