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
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.
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.
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 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
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.
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 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.
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.
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 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
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
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🥰