React-Sight

Extends the Developer Tools, adding a sidebar that displays React Component Hierarchy.

What is React-Sight?

React-Sight is a Chrome extension that extends the Developer Tools by adding a sidebar displaying the React Component Hierarchy. It provides an interactive tree diagram of the components rendered on the page, allowing you to see the components' state and props in real time.

Download

Extension stats

This extension was removed from Chrome Web Store on 2021-11-07

By: http://www.reactsight.com

Users: 10,000+

Rating: 2.53 (49)

Version: 1.3.0 (Last updated: 2020-04-14)

Creation date: 2020-04-11

Risk impact: High risk impact

Risk likelihood: High risk likelihood

Manifest version: 2

Permissions:

tabs
activeTab
<all_urls>

Size: 309.25K

URLs: Website

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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

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.

Jon Seidel, 2021-09-24

This extension causes death loop in React app.

Dawid Janiga, 2021-03-17

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.