react-scope / react-scope

Visualize your React components as you interact with your application.

---

Visualize your React components as you interact with your application.

Setup

1. Install React Scope from Chrome web store.
2. (Important) Install React Developer Tools if you haven't already.
3. Enable "Allow access to file URLs" in the extension settings for React Scope.
4. Run your React application.
5. Open Chrome Developer Tools -> React Scope panel.

Usage

Hover over the nodes within the DOM tree visualization to see each component's state and props.

Use your app to make changes to state (e.g., trigger click events, submit data, etc.).

Every state change will update the visualization. You can click the next / prev buttons to navigate between current and previous states of your application.

Notes

This is an early stable release undergoing continuous development. Currently, this version is optimized for use in developing smaller-scale React applications.

If you experience duplicate state/props information being displayed, please try refreshing the page.

Contact

If you have suggestions or want to help make React Scope better, feel free to submit an issue or contact us at [email protected]. (Pull requests for typographical errors will likely be ignored.)

Check us out at reactscope.com

Authors:

Kevin Gabinete - https://github.com/kgabinete08

Jonathan Lee - https://github.com/GoingInfinity

Tiffany Lin - https://github.com/misstiffanylin

Ringo Yip - https://github.com/ringoyip0901

---

© React Scope 2018

react-scope's Issues

WordPress / Gutenberg issues

Tried out React Scope for Gutenberg development (a WordPress editor project being built in React). Unfortunately, it appears there's some kind of conflict. The post page in WordPress (with Gutenberg activated) never stops loading. It behaves as if Gutenberg hasn't loaded yet, so you're not able to edit the post. I don't know the technical details on Gutenberg, so I can't speak to how it could conflict here, but I thought I'd let you know.

Gutenberg Project:
https://github.com/WordPress/gutenberg

Add CONTRIBUTING.md

A CONTRIBUTING.md file can be added to better understand the project and try to contribute to it.

Feature Request: Inspector view could be bigger

Hi Guys,

great extension btw! Just one thing. Don't suppose you could add the ability to either full screen the react scope view or at least make the inspector views a bit bigger? Just it's difficult (especially for large projects) to get an overview of the complete component hierarchy. See attached screenshot of my work iMac.

Error report

Hi all...

Just installed and tried the tool and had no joy. It never picks up (or crashes before it acknowledges) that it's looking at a React app, and I got this error in the logs:

hook.js:56 Uncaught TypeError: Illegal invocation
at Object.stringify ()
at stringifyData (hook.js:56)
at traverseSixteen (hook.js:278)
at traverseSixteen (hook.js:289)
at traverseSixteen (hook.js:289)
at traverseSixteen (hook.js:289)
at traverseSixteen (hook.js:289)
at traverseSixteen (hook.js:289)
at traverseSixteen (hook.js:289)
at checkReactDOM (hook.js:148)
at getInitialState (hook.js:24)
at setInitialState (hook.js:36)
at hook.js:49
stringifyData @ hook.js:56
traverseSixteen @ hook.js:278
traverseSixteen @ hook.js:289
traverseSixteen @ hook.js:289
traverseSixteen @ hook.js:289
traverseSixteen @ hook.js:289
traverseSixteen @ hook.js:289
traverseSixteen @ hook.js:289
checkReactDOM @ hook.js:148
getInitialState @ hook.js:24
setInitialState @ hook.js:36
(anonymous) @ hook.js:49

Running Chrome Version 63.0.3239.132
Dev Tools: 2.5.2
React Scope: 1.1.1

The application is using Redux, Apollo, and RR4, to mention a few complications.

Happy to provide more info if useful.

When used with MobX project: Uncaught TypeError: Cannot read property 'getState' of undefined

(This is related to issue #47, but note that that issue explicitly states in the latest interactions that Redux was present in the reported cases. Mine here is where Redux is not present, but MobX is.)

When used with a project that uses MobX, but not Redux, we get errors in React-Scope, because the extension finds a node named 'Provider' and assumes it's a Redux Provider. In fact, it's a MobX Provider, which doesn't contain the expected properties.

Uncaught TypeError: Cannot read property 'getState' of undefined
    at traverseSixteen (VM174 hook.js:260)
    at traverseSixteen (VM174 hook.js:289)
    at checkReactDOM (VM174 hook.js:148)
    at getInitialState (VM174 hook.js:24)
    at setInitialState (VM174 hook.js:36)
    at VM174 hook.js:49

Chrome DevTools, stopped where it goes wrong:

Checking only for the node name 'Provider' isn't sufficient to be sure that a Redux Provider node has been located.

Causes React sites to freeze

After installing the extension, going to sites like facebook.com or reactjs.org would freeze the tab it's on. The sites work like normal immediately after disabling the extension.

chrome locking up

After installing today, I noticed that dozens of sites were freezing. I disabled this extension then everything worked normal.

OSX High Sierra 10.13.3
Chrome 63.0.3239.132 (Official Build) (64-bit)

Here's one url that was locking up in particular: https://bootstrap.build/app

Uncaught TypeError: Cannot read property 'getState' of undefined

Thanks for the great tool. It works great in one of my projects. In another one I get:
Uncaught TypeError: Cannot read property 'getState' of undefined
at traverseSixteen (hook.js:260)
at traverseSixteen (hook.js:289)
at checkReactDOM (hook.js:148)
at getInitialState (hook.js:24)
at setInitialState (hook.js:36)
at hook.js:49

"Uncaught TypeError: Cannot read property '$Js' of undefined" in React project using yfiles library

I have a react project that also uses redux and yfiles.
When I start the application, I get the following error:

Uncaught TypeError: Cannot read property '$Js' of undefined
    at Function.$m10 (:3000/static/js/yfileslib.bundle.js:16607)
    at Object.get (:3000/static/js/yfileslib.bundle.js:16607)
    at Object.stringify (<anonymous>)
    at stringifyData (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:56)
    at traverseSixteen (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:278)
    at traverseSixteen (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:289)
    at traverseSixteen (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:289)
    at checkReactDOM (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:148)
    at getInitialState (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:24)
    at setInitialState (chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:36)
    at chrome-extension://nkkiickggkoojpdiajhgkbdmfgcinlai/backend/hook.js:49

The error originates from one of the yfiles file.

Cannot load React site with this extention loaded...

I get the unresponsive error until i turn this extension off (or use a different browser)