Top 10 React Chrome Extensions
Tags: webdev, javascript, programming, tutorial
Published: 2022-12-05 06:37:09

## 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](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en-US)

**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](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en-US)

**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](https://chrome.google.com/webstore/detail/react-context-devtool/oddhnidmicpefilikhgeagedibnefkcf?hl=en-US)

**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](https://chrome.google.com/webstore/detail/html-to-react/dangmcmbllpnmlkfpbciobokmaaomggm?hl=en)

**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](https://chrome.google.com/webstore/detail/html-to-react/glefoejbpalgpdgfbbmemfgegepiamnd?hl=en)

**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](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh)

**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](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga?hl=en)

**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](https://chrome.google.com/webstore/detail/react-vt/aphjepidficfgphkbggojoemgpmianhi?hl=en)

**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](https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm)

**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](https://chrome.google.com/webstore/detail/jinno-design-any-website/nggpkpfmdkbaakpndblpandmldendooa)


Follow Me On [LinkedIn](https://www.linkedin.com/in/mahmoud-alsayied/) To Learn more

Follow Me On [GitHub](https://github.com/mahmoud-sayed) to explore more projects