30 browser extensions every developer should have
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.
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.
Resize the browser window to emulate various screen resolutions.
7. JSONLite
Browser extension for viewing JSON files.
Show multiple screens at once, Responsive design tester
9. BrowserStack
Instantly test your webpage on any desktop or mobile browser.
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 Palette
A must-have tool for designers and frontend developers to grab colors for any website.
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
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 Imageye 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.