Modern browsers like Google Chrome, in addition to providing a great experience for website visitors, also provide good tools for web developers to build great applications. You can choose from several different extensions available in the browser. So here are the best things to do to help software engineers become more productive, develop applications faster, and find bugs faster.

List of plugins for this article:

• React/Redux And Vue Dev Tools
• JSONView
• Library Sniffer
• CSS Scan ۲.۰
• Web Developer
• WhatFont
• ColorZilla
• Spectrum
• Site Palette
• Toby
• Talend API Tester
• Full Page Screen Capture

React/Redux and Vue Dev Tools

React.js and Vue.js are two great JavaScript frameworks. But in order to use all their power, you must also use the related browser extensions.

React Developer Tools is available for Google Chrome and DevTools extends you. You can use it to check components, props and React status. This plugin is really useful for developing React.js.

If you have ever had problems with your application, Redux DevTools has come to your aid. This plugin can be used with any architecture mode and works well with Redux. Activate your Chrome extension and visit websites like Airbnb.com. This website uses React and Redux. So you can get a thorough knowledge of how they use DevTools for the management structure.

Vue.js DevTools is the equivalent version of Vue. It is very useful for debugging Vue components and is also necessary for Vue programmers.

JSONView

Ever wondered why JSON data is so beautiful in other people's browsers but not in your browser? This is probably because they use the JSONView plugin in their Chrome. This plugin formats JSON beautifully and instantly. This plugin is definitely one of my favorite plugins.

Library Sniffer

Library Sniffer is a great tool if you want to know right away what framework or library a web application is using. For example, you can identify which websites are based on WordPress or Drupal and which are built with Vue.js, React.js or AngularJS.

CSS Scan 2.0

This plugin is great for inspecting and copying CSS. But you should keep in mind that you need to buy a license to use it.

Peeper CSS is also a free alternative, allowing you to focus more on your design instead of searching for code.

Web Developer

This plugin adds a toolbar to your browser and offers a variety of development tools. For example, with its help you can disable JavaScript, change the layout of the page, manipulate images and do many other things. This plugin is available for Chrome and Firefox.

WhatFont

This is a small plugin that specifies the fonts used on websites. All you have to do is activate it and place it on the text you want. It is very easy and simple to use. You can get it for both Chrome and Firefox.

ColorZilla

This plugin is available for Chrome and Firefox. ColorZilla lets you take advantage of a variety of features, including advanced eye drops, color selection, and more. For example, you can get the color of each pixel from the website. This plugin also comes with a color history and palette display.

Spectrum

Usability is one of the most important aspects of modern web development because many users are disabled when using websites or applications. Color blindness is an example that affects the ability of people to recognize certain colors. With Spectrum, you can test websites for people with different types of color blindness.

Site Palette

This plugin allows you to extract colors from any website as color palettes. The plugin also supports multiple palette generators, creates shareable links, prints palettes or saves them in PDF format.

Toby

This plugin is built to help you organize your browser windows. Helps you no longer have to keep 1000 windows open at the same time. This plugin is an intuitive workspace that exists in every new window. You can add items by dragging and dropping. This plugin really helps you to be more productive.

Talend API Tester

This great plugin allows you to interact with SOAP, REST and HTTP APIs through your browser. The free version of this plugin handles a variety of HTTP requests. The tool will also support security and authentication.

Full Page Screen Capture

Ever wanted to take a screenshot of your current page without asking for additional permissions? If so, this is probably the right plugin for you. Just click on the plugin icon or use the corresponding shortcut keys. This will take you to a new window; Where you can download the result as an image or PDF. This plugin even works with navigation and iframe elements.

Conclusion

This is a collection of great extensions for my browser. I really hope you can use one or more items for your day-to-day work as a developer.