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 [email protected] and we'll take a look at how we can make it work! Thanks for checking out React Sight!
- (2019-12-19) 山岚: It does not take effect after installation. There is always a small picture bouncing when you turn on the react_sight of F12. There is no other effect except for the first time
- (2019-12-02) Tom: Does not work as per the GH issue.
- (2019-11-18) Sara Kennedy: Broken and no longer maintained
- (2019-11-13) Kevin Reevers: It seems the team working on this has gone silent. Doesn't work in recent (16.8) react version.
- (2019-10-24) Vivek N: It is no longer maintained. and apparently it wont work for latest version of react. https://github.com/React-Sight/React-Sight/issues/134/#issuecomment-465236544
- (2019-09-09) Kenneth Hughes: Failed. "Cannot find React. Triggering a setState() usually fixes this" Tried navigating to trigger setState(). Tried local and remote sites. Thanks, but uninstalling.
- (2019-05-02) Jinet Jose: Did "Allow access to file URLs" and refresh and navigations multiple times. Still getting Cannot find React Triggering a setState() ussually fixes this Note: React-Sight works best on local projects with React v15/16 Using React V16.4
- (2019-01-23) James Heazlewood: It doesn't work on large apps as you get the "Object reference chain is too long" in Chrome. Please add a fix for this, maybe a limit to how far up the object chain it goes and fail gently. I'll do a better review then.
- (2018-11-24) Mark Adamson: Unfortunately the first view it showed seemed to be zoomed in too far and only showed 3 components. It then froze up as I tried to zoom out and eventually crashed and reloaded
- (2018-11-16) Kris Li: Not worth to install. I got an error: 'Cannot find React' and there's no solution. This issue was submitted at github on Apr. 23, while it seems no solution was provided.
- (2018-09-28) Naresh Kumar: For react developers, perfect tool to react :)
- (2018-08-29) Joey Figaro: Seems to stop working if your components are deeply nested. If you're composing and nesting a lot of components, you might run into the same issue. Extension stopped graphing at a given url's <Route /> with nothing under it. It only managed to show our providers, containers, and routing-related HoCs/components, which wasn't super helpful. Suffered the same issue other folks are reporting with getting it to start showing information.
- (2018-08-04) Ashraf Hadden: When it works, it's awesome! "Cannot find React" => Checkout https://github.com/React-Sight/React-Sight/issues/134/ (Fixed me in a second). Also don't forget to turn on "Allow access to file URLs" in chrome://extensions/ for both React-Sight and React DevTools
- (2018-06-15) Getting Error on local react project: Cannot find React Triggering a setState() ussually fixes this
- (2018-01-19) Gabi Wissotzky: has an error inside and doesn't work
- (2018-01-17) Eric Ho: Has potential but controls are not usable for large react apps with many nodes. It's very easy to get lost when searching for nodes. I often find myself zooming out but never being able to find my way back to a node because I scrolled too far offscreen. Some recommendations 1) when clicking on a top node link, automatically focus that node in the tree. 2) provide a way like right-click > Inspect, to be able to visually select a node from the rendered page.
- (2017-11-23) Mose Raguzzini: Not working with react 16
- (2017-11-09) Moeen Basra: not working with react 16 for sure and rest I can not confirm. good day.
- (2017-11-07) Ian Price: Too much recursion... Cannot find imported React library And that's on reactsight.com...
- (2017-10-25) Jeremy Quijada: excelente
- (2017-10-17) Vincent Vuong: Wow! this is exactly the tool I've been looking for while developing in React! Thank you!!
- (2017-10-17) Brandon Danh: Very helpful, pretty straightforward to use so far
- (2017-10-15) Helio Alves: Very interesting approach. Very useful to view what is going on in your apps. It would be nice to allow the screen showing up the tree to scroll horizontally and vertically and keep the right screen fixed to view information of the node.
- (2017-10-13) Joe Power: message is "too much recursion" . even on empty CRA app
- (2017-10-11) Jeff Yamamoto: I hope they continue to add more features. I can see potential