react-sight / react-sight

Visualization tool for React, with support for Fiber, Router (v4), and Redux

Note: project isn't actively maintained. If you would like to maintain, feel free to submit PRs or reach out to @davidcsally I also suggest installing it as click-to-run or inside its own chrome profile, so that it doesn't slow down regular browsing

React Sight

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

Set Up | Install From the 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

Set Up | Firefox

This is the same as Chrome, except you will use the addons from the Firefox website

1. Add React Dev Tools
2. Add React Sight from the Firefox addons website.

Building Your Own Version

If you'd like to build your own version of React Sight from the source code, follow these steps:

1. Clone the repo and run yarn install or npm install to install dependencies.
2. Use yarn build to generate the build.

Adding to Chrome

1. Open Chrome and go to the extensions page
2. Toggle developer mode in the upper right corner if necessary
3. Click 'Load unpacked'
4. Load the folder ~/ReactSight/build/extension

Firefox

1. Load the extension as a "Temporary Extension" by navigating to: about:debugging#/runtime/this-firefox
2. Click "Load Temporary Add-on"
3. Load the file ~/ReactSight/build/extension/manifest.json. In Firefox, you load the extension's manifest instead of the extension's folder

If you have any additional questions send us a message at [email protected] :)

Usage

Hover over nodes to see their state and props in the side panel.

Hide DOM elements, Redux components, and Router components with the built in filters, so that you can focus only on the components you've written

Zoom in by double clicking, and zoom out by shift + double clicking (mousewheel zoom coming soon!)

Why?

We built React Sight because there are no tools on the market that give you a visual representation of the structure of your App. When we were developing our own projects, we wished we had a way to see how everything was structured.

We wanted React Sight to be simple to use, which is why all you have to do is install a Chrome extension. No modifying your existing code!

How Does It Work?

When the dev tools are opened, React-Sight searches for React renderer's, and patches the render to collect data on each state change.

Data is posted to the Window, where it is read by Chrome's background.js window, and is then relayed to React-Sight's devTools page.

The raw data is then processed and fed to D3, where it is displayed to the user.

Troubleshooting

In React16 you will need to trigger a render to have your application show up. The data is not exposed until React's renderer is called.

'React not found' or no data:

Sometimes React-Sight doesn't get a snapshot of the data at load, triggering a setState ussually fixes this

Maximum call stack exceeded and other console errors:

This is a bug where the parsing functions get stuck in an infinite loop. We are working on a fix.

Testing

Run yarn test to run the test suite. Tests are run using jest.

Contributing

Found a bug? Have a suggestion? Want to make React-Sight better?

Please submit issues/pull requests if you have feedback or would like to contribute. If you're interested in joining the React Sight team as a contributor, feel free to message one of us directly, or just start submitting pull requests!

Authors

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

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

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

Contact

Like our app? Found a bug?

Tell us what you think!

[email protected]

Visit us at www.reactsight.com

Roadmap

Here's our top development priorities

1. Better support across on React 16+.
2. More consistent detection of root nodes when React Sight is opened.
3. Support for multiple React Applications / mounting nodes, currently it picks the first React application in the renderers list.
4. More robust error handling and guard blocks for extracting state, props, and store
5. Logging / Debugging mode for development, feedback, and error reporting
6. Performance and stability updates
7. UX improvements
8. Improved documentation
9. Hook into the react-devtools-backend so that we don't have to reimplement it :)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

react-sight's Issues

Footer missing

The website footer is not available. One can be added and contact details of the owners, contributors can be put as well.

feature request: Support React-Native

React Devtool and Redux Devtool, both have support with React-Native, and can be debugged from Chrome. Maybe there is some way to adapter this tool for RN apps.

Seems to mess with internal API somehow

I was encountering gaearon/react-deep-force-update#11 until I uninstalled it :(

feature request: Download as image

I can implement this feature. I'm already working on it

Cannot find React

I got : 'Cannot find React', I tried to enter 'setState()' in console, but I got :

Uncaught ReferenceError: setState is not defined
at :1:1

Am I doing something wrong ?

> [Feautre Request] : Adding Support for Preact

Most of us are using React in the form of Preact with adding Preact/Compat so enabling support for Preact will makes this app more wider

Chrome RangError : Maximum call stack size exceeded

Error just occurs when

• i installed the extension from chrome store
• i reloaded my React App

    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:138:20)
    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:166:30)
    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:166:30)
    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:166:30)
    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:166:30)
    at props.(anonymous function).forEach (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:161:33)
    at Array.forEach (<anonymous>)
    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:160:20)
    at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:166:30)
    at props.(anonymous function).forEach (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:161:33)

Salesforce.com compatibility: "[NoErrorObjectAvailable] Script error."

When the React-Sight chrome extension is enabled, the Salesforce Lightning Platform encounters a generic error: "[NoErrorObjectAvailable] Script error.".

This does not happen when using the Salesforce Classic Platform.

Note: Using only the "React Developer Tools" extension does not give any conflict with Salesforce Lightning.

Temporary solution: Just disable the React-Sight extension.

"React Sight" link on reactsight.com is broken

As the title says, "React Sight" link on reactsight.com to https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn 404s.

Chrome Extension link is broken in the documentation

The link to the chrome extension either in the documentation or in the website does not work (it goes to 404)

feature request: zooming in and out in the component tree.

I'm working on a large scale app in React and this is an awesome tool!. Could you add the ability to zoom in and out?

React 16

Perhaps it is just my app but it seems not to work with my React 16.

I did not have tail logging on when React Sight crashed but the panel just seems to stay empty.

Using <Sight> causes "Uncaught TypeError: Cannot read property 'constructor' of null"

When using the provider setup like so:

import Signt from 'react-sight'
  ReactDOM.render(
    <Sight>
      <AppContainer store={store} routes={routes} />,
    </Sight>
    document.getElementById('root')
  );

I get "Uncaught TypeError: Cannot read property constructor of null"

Could it maybe have to do with stateless components not having a constructor? Are stateless components supported?

Did I maybe miss something in setup?

Cannot find imported React library - no console error

there is no error in the console.

Broken URL for extension @Chrome

When navigating to the extension URL you get rendered to a 404 view.
https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn

(in devtools tab): "Cannot find imported React library"

chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:136 Uncaught RangeError: Maximum call stack size exceeded
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:136)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)
at parseProps (chrome-extension://aalppolilappfakpmdfdkpppdnhpgifn/backend/installHook.js:164)

Separate core vs extension

Great work. Big fan of UI based dev tools.

When I looked at this project I was like "Oh! this would be an awesome thing to integrate into the tool I'm building" and then realized this is an extension.

Would it make sense to separate the core visualization component into a separate package and push it to npm and the keep extension code in a separate package using tools like lerna or yarn workspaces so others can take advantage of the core components and integrate to other tools?

The demo box and the React Sight Box seem to be aligned badly.

The demo box is too big and is occupying more area than needed. The react sight box doesn't have much area, hence the scrollbar makes it look ugly. The proportion can be changed.

TypeError: Cannot convert undefined or null to object (installHook.js)

installHook.js:1 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Module.12 (installHook.js:1)
    at n (installHook.js:1)
    at installHook.js:1
    at installHook.js:1

on any site in Opera 64.0.3409.0

Converting circular structure of JSON

Hi,
I've tried to use it on my app, but at the start it show in console this error

installHook.js:59 Uncaught TypeError: Converting circular structure to JSON
at JSON.stringify ()
at getData (installHook.js:59)
at window.addEventListener (installHook.js:189)

Chrome extension makes sites with production build unresponsive

Overview

When the extension is enable on Chrome and one navigates to a web page that is using the production build of React, the page becomes unresponsive and/or slow.

How to reproduce

If you go to react i18next documentation page, while the extension is enabled, then try to navigate to a section using the side bar, the page hangs up.

Testing notes

I've tested this by using the incognito tab, then enabling one extension at a time till the issue presented itself.

Versions

• Chrome: 83.0.4103.97 (Official Build) (64-bit)
• React-Sight: 1.3.0
• OS: macOS 10.15.5

[Feature Request] Firefox support

Is there a plan to support Firefox too?

This extension has been turned off as it's been marked unsafe by the Chrome Web Store.

Looks like this might be the issue in #294 too

Cannot read property 'current' of undefined

In the view, "Cannot find imported React library"

In the console:

Uncaught TypeError: Cannot read property 'current' of undefined
    at traverse16 (installHook.js:202)
    at window.addEventListener (installHook.js:188)

Extenstion not getting installed in firefox and chrome.

this extenstion is showing page not available in both chrome and firefox. is this currently done for a purpose or is this a bug.

`window.store` is manipulated after `react-sight` chrome extension is installed

In my project, window.store is a reference to Redux store instance. After installing react-sight, the window.store is manipulated to state object after page load.

It takes me half an hour to identify the root cause after I uninstalling react-sight chrome extension. Perhaps better to have a clue in README.md so that user avoids to use window.store.

Maybe this project requires older node-sass which requires python2?

I tried building it, but it says gyp ERR! stack SyntaxError: invalid syntax
By looking at the python code, I can tell it's calling some py2 code, which is deprecated by(January 1, 2020). And I have py3 in my system. And I also think this error is generated because of some older version of node-sass

Here is the full log:

C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight>yarn
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[6/6] ⠁ node-sass
[-/6] ⠁ waiting...
[-/6] ⠁ waiting...
[-/6] ⠁ waiting...
error C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\node-sass
Output:
Building: C:\Program Files\nodejs\node.exe C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'C:\\Users\\Hp\\AppData\\Local\\Google\\Chrome\\Test\\React-Sight\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:191:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:191:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Python39\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:383:12)
gyp ERR! stack     at ChildProcess.emit (events.js:400:28)
gyp ERR! stack     at maybeClose (internal/child_process.js:1058:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
gyp ERR! System Windows_NT 10.0.19044
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Hp\\AppData\\Local\\Google\\Chrome\\Test\\React-Sight\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight\node_modules\node-sass
gyp ERR! node -v v14.18.0





C:\Users\Test\AppData\Local\Google\Chrome\Test\React-Sight>

[Feature Request] Bug: shows only one of two apps

I have two React apps running on my staging site: the main one, and one for admin stuff.

Only the admin app shows up which means I can't see the hierarchy of my actual app.

The React Dev Tools shows the following

<AdminApp>...</AdminApp>
<MainApp>...</MainApp>
<ModalPortal>...</ModalPortal>

But React-Sight only shows a single dot for the AdminApp and doesn't show the MainApp or ModalPortal

The height of the header is too long

The height of the header is too long. While scrolling down, it hides some space which doesn't enable one to see some part of the website.

Cannot find React Triggering a setState() usually fixes this

I am getting this error when I run the React-Sight..
Cannot find React Triggering a setState() usually fixes this

Unchecked runtime.lastError: The message port closed before a response was received.

After navigating to production deployed app with CSP enabled produces a lot of errors in the console:

Unchecked runtime.lastError: The message port closed before a response was received.

React-Sight overwrites window.store

React-Sight overwrites window.store, interfering with other libraries that also rely on that variable being there.

Could React-Sight maybe use a less common variable name for storing its data? Or perhaps use a namespace?

"Cannot read property getState of undefined"

First off: Thanks for the great package

Following basic setup instructions causes the following issue:

It looks like it is assuming that all components are getting store? Not sure why the check for the property isn't catching it.

props.hasOwnProperty is not a function

Hi,
Just went across this extension and there is an issue when a sub-prop is created using Object.create(null) because this object wouldn't have the Object prototype (and the hasOwnProperty method).

React-Sight/chrome-ext/backend/installHook.js

Line 140 in 8bffa53

if (props.hasOwnProperty('props')) {

It also pollutes the console on website without React with Cannot read property 'version' of undefined on

React-Sight/chrome-ext/backend/installHook.js

Line 27 in 8bffa53

if (instance.version) {