Must have browser Extensions for React Developers

As the title suggest in this post we are going to learn about must have browser extensions for React developers. All the extensions mentioned below are used by me in day to day life.

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.

React Developer Tools

1. React Developer Tools

Blog React React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

You will get two new tabs in your Chrome DevTools: “⚛️ Components” and “⚛️ Profiler”.

This extension is used by almost all the React developers. By using this extension you can check your component state and props. The Profiler tab allows you to record performance information.

2. Pesticide for Chrome

Blog React Pesticide for Chrome

Managing layout is not an easy job for a front end developer. This extension gonna help you to create pixel perfect UI Components for your React app.

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

3. Baseliner

Blog React baseliner

An extension for designers and developers who care about vertical rhythm.

This tool will add a grid layer on top of any website to be used as a guidance when developing interfaces.

You can set the horizontal guides to match your specification as well as the starting point, in case you’re only concerned about individual modules of your site.

For better experience, you can change the colour of the lines as well as the opacity, making it easier to compare the grid with your website design.

4. Color by Fardos

Pick colors from websites, save colors & gradients, get matching shades and tints and create beautiful gradients.

1. Color pick and save multiple colors from any site (using zoom technology) Cmd/Ctrl + Shift + e

2. Save your favorite colors and gradients, click any color and it’s HEX is saved to your clipboard

3. Find shades, tints, complementary and other color combinations for any color

4. Sync your colors between multiple Chrome Browsers

5. Create linear or radial gradients with unlimited stops

6. Browse hundreds of beautiful gradients, edit, save and copy it’s CSS whenever you need it

5. Redux DevTools

Blog React Redux DevTools

Redux DevTools for debugging application’s state changes.

The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

6. Resolution Test

Blog React resoultion test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customize that list.

I hope you have like my list of Must have browser Extensions for React Developers.

Checkout 5 vscode extensions for react developers here.

Categories: Reactjs