React Sight — Visualise your React apps

React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.

Official Website: https://www.reactsight.com/

Credit — https://www.reactsight.com/

Set Up | Install From Chrome Store

1. Make sure you’ve added React Dev Tools to Chrome.
2. Install React Sight from the Chrome web store
3. 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
4. Run your React application, or open (almost!) any website running React!
5. Open Chrome Developer Tools (cmd+opt+j) -> React Sight panel

Building Your Own Version

If you’d like to build your own version of React Sight:

1. Clone the repo and npm install dependencies
2. Use npm start to generate the build
3. In Chrome, open the extensions tab and click ‘Load Unpacked Extension’. Load the folder ‘~/ReactSight/chrome-ext’

Features

NO SET UP REQUIRED

React Sight requires NO modification to your codebase, so using it is as simple as adding our Chrome Extension

WORKS WITH ALL YOUR FAVORITE LIBRARIES

React-Sight supports React 14.7+ (including Fiber), React Router v4, React Redux, and more

BUILT FOR SPEED

React-Sight is light-weight and unobtrusive, and will show you how your Application is working

SEE ONLY WHAT YOU WANT TO SEE

Built in filters allow you to hide elements you don’t want to see, allowing you focus only on the components that you’ve written

Authors

David C Sally (https://github.com/davidcsally)

Grant Kang (https://github.com/Grant05)

William He (https://github.com/hewilliam)

GitHub

React-Sight/React-Sight