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.
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.
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.
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.
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.
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.
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.
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.
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)
Thanks for this awesome extensions ❤