CRX id
aalppolilappfakpmdfdkpppdnhpgifn
aalppolilappfakpmdfdkpppdnhpgifn
Description from extension meta
Extends the Developer Tools, adding a sidebar that displays React Component Hierarchy.
Image from store
Description from store
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!
Latest reviews
- (2021-09-24) Jon Seidel: Completely unusable for me: cratered the response time on my app -- what used to take 1-2 seconds to load now took 25 seconds. Multiple page-wait displays from chrome and high CPU usage.
- (2021-03-17) Dawid Janiga: This extension causes death loop in React app.
- (2021-01-22) Nícolas Iensen: I like the concept of the extension. However, it severely degrades the performance of Google Chrome. When I try to access Slack, for example, the web page freezes completely.
- (2020-12-01) Efstratios Bektasiadis: Makes react application extremely slow and unresponsive. Cant recommend it to anyone... Had myself searching for the problem for 4 hours straight....
- (2020-10-09) Camilo Martinez: This extension slow down a lot of pages like Notions a Whatsapp web.
- (2020-09-07) André Feijó: Doesn't work, as everyone else I'm getting the "Cannot find React" error.
- (2020-07-01) John Smith: Broken, runs an infinite loop.
- (2020-04-15) I think an intern made this extension, it has bad performance and make the application crash. Perhaps they are mining bitcoin with it? who knows? most likely.
- (2020-04-15) Andreas høj: Absolutely trash extension - didnt work at all and it made my application lag.
- (2020-03-22) Tung Nguyen: I installed a bundle of extensions for React.js development. Then, most of web apps that are using React included Messenger, Facebook, Asana, etc... suddenly very laggy after a few words typing or dragging. I thought the bug comes from the app / React dev team or Chrome Beta (Edge Beta with clean install state is ok). However, later I check Yahoo Mail and suddenly detect the performance problem occurs after a few usage. This extension seems blocking the rendering of React runtime. Please fix it soon or decide to deprecated this extension.
- (2020-02-03) Eros Valzasina: Non funziona (React 16.12.0)
- (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
- (2017-10-11) Jon Roach: Great tool for seeing what's going on in your react app. Super easy to install and use.
- (2017-10-10) David Sally: very useful for debugging my apps!