Extends the Developer Tools, adding a sidebar that displays React Component Hierarchy.
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***
1. Install React Dev Tools
2. Install React Sight
3. Run your React application, or open (almost!) any website running React!
4. 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
Be sure to check us out on GitHub and www.reactsight.com!
-----
This has been the side project and & passion of just a few devs. There are some bugs, and it won't work on every application. If it's not working for your project, please send use an email at reactsight@gmail.com and we'll take a look at how we can make it work!
Thanks for checking out React Sight!
