13 Must-Have Browser Extensions for Web Developers

Simon Holdorf
4 min read
updated: January 5, 2021

Modern browsers like Google Chrome not only provide a great experience for visiting websites, but they offer great tools for web developers to build awesome applications. One can choose from a variety of great browser extensions, so I’ve collected some of the best that will help software engineers be more productive, develop applications more quickly, or find bugs.


React/Redux and Vue Dev Tools

ex1
React.js and Vue.js are great JavaScript frameworks. But in order to harness their full power, you should use their respective browser extensions.

React Developer Tools is available for Google Chrome and extends your DevTools. You can inspect React components, props, and state. It’s really helpful for React.js development!

If you’ve ever experienced trouble with the state of your application, Redux DevTools has come to the rescue. It can be used with any architecture-handling state and works especially well with Redux. Pro tip: Activate the extension in Chrome and visit websites like Airbnb.com. Airbnb uses React/Redux and you can gain insights on how they structure their state management with the DevTools.
Cool, right?
ex2
Vue.js devtools is the Vue equivalent to the React Dev Tools. It’s pretty handy for debugging Vue components and a must-have for Vue developers.


JSONView

ex3
Ever wondered why JSON data looks so pretty in others’ browsers but not in yours? That’s probably because they use the JSONView extension for Chrome. It formats JSON really nicely and almost instantly. It’s definitely one of my favorite extensions!


Library Sniffer

ex4
Library Sniffer is a great tool if you want to quickly find out what framework or libraries a web application is running on. For example, you can detect if a website is based on WordPress or Drupal, or if it was built with React.js, Vue.js or AngularJS…


CSS Scan 2.0

ex5
CSS Scan 2.0 is a great extension to inspect and copy CSS by hovering over any element. But it comes with a caveat: It requires the purchase of a license.

A free alternative is Peeper CSS, which lets you focus on designing rather than digging in code.


Web Developer

ex6
The Web Developer extension adds a toolbar to your browser with various developer tools. You can disable things like JavaScript, change the page’s layout, manipulate images, and much more. It’s available for Chrome and Firefox!


WhatFont

ex7
WhatFont is a rather small extension that identifies the fonts used on websites for you. All you need to do is enable the extension and hover over text. It’s as simple as that! You can get it for both Chrome and Firefox.


ColorZilla

ex8
ColorZilla is available for Chrome and Firefox. It provides an advanced eyedropper, a color picker, gradient generator, and more. You can get the color of any pixel on a website, for example. It also comes with a color history and palette viewer.


Spectrum

ex9
Accessibility is an important aspect of modern web development because a lot of people are handicapped when using websites and applications. Color Vision Deficiency (CVD) is an example that affects people’s ability to distinguish certain colors. With Spectrum, you can test websites for people with different types of CVD.


Site Palette

ex10
This extension lets you extract colors from any website as color palettes. It supports several palette generators, creates shareable links, prints out or saves palettes in PDF format, and more.


Toby

ex11
Toby was built to help you organize your browser tabs so that you don’t have to keep 1,000 open at a time. It’s a visual workspace living on every new tab, and you can add things by dragging and dropping. And it really helps you become more productive.


Talend API Tester

ex12
Talend API Tester is a great extension that lets you interact with REST, SOAP, and HTTP APIs from within your browser — similarly to Postman, for example. The free version handles all kinds of HTTP requests and also supports security and authentication.


Full Page Screen Capture

ex13
Have you ever wanted to take a screenshot of your current page in its entirety without requesting any extra permissions? Then Full Page Screen Capture might be just the right extension for you. Just click on the extension icon or use the shortcut and be transported to a new tab, where you can download the result as an image or PDF. It even works with scrollable elements or iframes!


That’s my collection of great browser extensions. I really hope you can use one or more of them for your daily work as a developer.

If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰