React-Sight
Extends the Developer Tools, adding a sidebar that displays React Component Hierarchy.
What is React-Sight?
Stats
Other platforms
Summary
A Chrome Developer tool that displays the component hierarchy of React applications - Perfect for your own projects and for learning how organizations structure their own.
After adding React Sight to your browser, you will have a new tab in your Chrome Dev Tools. React Sight will read React's virtual DOM and render an interactive tree diagram of the components rendered on the page. By hovering over the nodes, you can see the components state and props and how they change in real time.
SET UP
Install React Dev Tools
Install React Sight
Run your React application, or open (almost!) any website running React!
Open Chrome Developer Tools -> Click on React Sight panel
*If you are running local file URLs, make sure to enable "Allow access to file URLs" in the extension settings for both React Dev Tools and React Sight
User reviews
Safety
Risk impact
React-Sight is risky to use as it requires a number of sensitive permissions that can potentially harm your browser and steal your data. Exercise caution when installing this extension. Review carefully before installing. We recommend that you only install React-Sight if you trust the publisher.
Risk likelihood
React-Sight may not be trust-worthy. Avoid installing if possible unless you really trust this publisher.
Promo images
Similar extensions
Here are some Chrome extensions that are similar to React-Sight: