DEV Community

Cover image for Top 10 React Chrome Extensions
mahmoud
mahmoud

Posted on

Top 10 React Chrome Extensions

There is a lot people use chrome as their primary browser. We’ve put together the top 10 Google Chrome extensions in this article to help you be more productive. Let’s dive into it without further due.

1- React Developer Tool

The Components tab displays the root React components rendered on the page and any subcomponents that they eventually rendered. You may inspect and modify a component’s current props and state in the panel on the right by selecting one of the tree’s elements.

Download Link

2- Redux DevTools

Redux DevTools for debugging state changes in applications. The addon gives your Redux development process power-ups. It may be used with any other architectures that manage the state. This is also an open-source project.

Download Link

3- React Context DevTool

This is similar to the Redux DevTools. The differences are It is a hook used for sharing data. If you handle small data, Context DevTool should be your first choice. React Context DevTool is used by users to track and debug state changes in React Context using the Reducer API. It is also an open-source project.

Download Link

4- HTML to React

You can easily convert HTML tags to JXS from your browser by using HTML to React. By copy-pasting an HTML code snippet into the text field, you can quickly auto-generate a class or functional component using this React extension. The HTML to React extension also helps convert HTML properties like class to camelCase JSX attributes.

Download Link

5- Website HTML To React

This extension converts HTML to REact with a single click.
Any webpage element can be transformed into a React component with
the help of this extension. It examines the semantics of HTML and CSS stylesheets and turns the chosen DOM element into JSX code.
Download Link

6- JSON Viewer

Though It’s not a direct react extension, almost every react developer uses it,If aesthetics is your concern, the JSON Viewer Chrome extension is one of the most beautiful developer tools. It is an alternative to JSON View that helps manage JSON data into an easily visible hierarchical view in a browser window.

Download Link

7- Reactime

This tool is used for time travel debugging and performance monitoring in React applications by retaining the state of components every time they render. It has many features like recording snapshots of application state, time-travel debugging, snapshot series comparison, tutorial walkthrough, and many more. It also has support for Gatsby and Next.js and beta support for TypeScript.

Download Link

8- ReactVT

React VT is a visual testing tool for react applications. It presents a live view of the React component hierarchy of your applications and current state and props.

Download Link

9- React performance Devtool

React Performance Devtool extension is used for monitoring React component performance. It allows you to check the functionality of React components.

Download Link

10- Jinno: design any website React/HTML/sketch

With Jinno, you can modify any website’s element and see how it may appear simultaneously before developing it. It’s a design system-focused extension. The website’s attributes, such as the font color, can be changed immediately, much like with Figma or Sketch.
Download Link

Follow Me On LinkedIn To Learn more

Follow Me On GitHub to explore more projects

Top comments (1)

Collapse
 
sohrab09 profile image
Mohammad Sohrab Hossain

Thanks for this awesome extensions ❤