Get best of the week

Browser extensions required by every web developer

Modern browsers are not only great web browsing apps.

Browsers are also platforms that offer web developers a ton of handy tools to help them create great sites. At the disposal of the developer, in addition to the built-in tools, there are a huge number of browser extensions. The author of the article, the translation of which we are publishing today, has selected the best, in his opinion, extensions that are designed to help programmers solve a variety of tasks facing them. These are mainly extensions for Google Chrome.



Development Tools for React / Redux and Vue.js


React and Vue.js are well-known front-end development tools. In order to work with them as efficiently as possible, it is worth installing the appropriate browser extensions.

The React Developer Tools extension enhances the capabilities of developer tools. Using it, you can examine React components, properties passed to components, and the state of components. It can bring real benefits to a React developer.


React Developer Tools

If you encounter any problems while working with the state of the application, the Redux DevTools extension may come to your aid . It can be used to work with states that are arranged in different ways; it works especially well when used with Redux. By the way, here's a tip for you. Install this extension and visit a site like airbnb.com. It uses React / Redux, so you, with the help of Redux DevTools, will be able to find out how the management of the state of the pages on this site works. For me - so it is very informative.

Vue.js devtools is the same as React Developer Tools, but for Vue.js. This extension is very convenient for debugging Vue components and is useful to everyone who uses this framework.


Vue.js devtools

Jsonview


Have you ever caught on the idea that in the browsers of other programmers the JSON data looks clear and accurate, but not in yours? Perhaps the whole point is that others use the JSONView extension . This extension very quickly and accurately formats JSON data. JSONView is definitely one of my favorite browser extensions.


Jsonview

Library sniffer


Library Sniffer is a great tool for anyone who wants to quickly find out what tools, libraries or frameworks were used to create the pages they view. For example, with the help of Library Sniffer, you can find out what a site was created with: WordPress, Drupal, React, Vue.js, AngularJS ...


Library sniffer

CSS Scan 2.0


CSS Scan 2.0 is a useful extension that allows a developer to explore and copy CSS simply by hovering over page elements. True, he has one minus. The fact is that to work with it you need to buy a license.


CSS Scan 2.0

This extension has a free alternative - CSS Peeper . It is designed mainly for designers, and not for those who write code.

Web developer


The Web Developer extension allows you to equip your browser with a panel that contains many different tools. With their help, for example, you can turn off JavaScript on pages, control the location of the page, and work with images. This extension is available for Chrome and Firefox. 


Web developer

Whatfont


WhatFont is a pretty small extension that allows you to identify the fonts used on web pages. In order to find out what font the text fragment is designed for, it is enough to enable the extension and move the mouse pointer over this fragment. Working with him, as you see, is extremely simple. It, like the previous extension, can be used by those who work in Chrome, and those who work in Firefox.


Whatfont

Colorzilla


The ColorZilla extension can be used in both Chrome and Firefox. It provides the developer with a tool for taking color proofs, a tool for choosing colors, a gradient generator and other useful tools for working with color. For example, you can use it to find out what color any pixel in a web page has. It stores the history of working with color and contains a tool for viewing palettes.


Colorzilla

Spectrum


Content accessibility is an important aspect of modern web development. The fact is that many people have limited ability to interact with web pages. One such limitation is Color Vision Deficiency (CVD). It affects a person's ability to distinguish certain colors. The Spectrum extension allows you to research sites for their suitability for people with various types of CVD.


Spectrum

Site palette


The Site Palette extension allows you to extract the colors used on the site from the site and arrange them as a color palette. It supports several ways to generate palettes, allows you to issue palettes by issuing a special link, supports the ability to print palettes, and knows how to convert them to PDF files. And this is not limited to Site Palette.


Site palette

Toby


The Toby extension is designed to organize browser tabs in such a way that in the course of work you would not have to keep a huge number of tabs open. This is a kind of tab control panel that is easy to use with the mouse. This extension can positively affect the productivity of the web developer.


Toby

Talend API Tester


Talend API Tester is a great extension that allows you to work from a browser with various APIs. These can be APIs based on REST, SOAP, and HTTP technologies. This is similar, for example, to Postman. The free version of the extension supports the execution of all types of HTTP requests, secure data exchange, authentication.


Talend API Tester

Full Page Screen Capture


Have you ever wanted to quickly and without unnecessary movements take a full screenshot of the page you are viewing? If so, then the Full Page Screen Capture extension may well come in handy . With it, you can get screenshots of the entire contents of the pages in PDF format or as an image. It can even work with elements that support scrolling, and with elements iframe.


Full Page Screen Capture

Summary


We reviewed about a dozen browser extensions for web developers. We hope you find something among them that is useful to you.

Dear readers! What browser extensions do you use for web development?

More articles:


All Articles