Visualize your React components as you interact with your application.

Overview

React Scope


Visualize your React components as you interact with your application.

React Scope screenshot

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

Comments
  • (added) createTree.js, devTools.css, styling, hover and click functionality, Bootstrap

    (added) createTree.js, devTools.css, styling, hover and click functionality, Bootstrap

    Added:

    • createTree.js (creates D3 tree)
    • Tree hover functionality
    • Button click functionality
    • devtools.min.css file
    • Integrated Bootstrap
    • Styled containers
    opened by tiffanyelin 1
  • (added) checkOptComponent function

    (added) checkOptComponent function

    Changes: 1.) Renamed a few functions for fewer confusions 2.) Minor debugging 3.) Included checkOptComponents function - to check which components are being potentially re-rendered unnecessarily.

    opened by ringoyip0901 1
  • When used with MobX project: Uncaught TypeError: Cannot read property 'getState' of undefined

    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:

    image

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

    opened by RoystonS 0
  • Feature Request: Inspector view could be bigger

    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.

    screen shot 2018-02-23 at 15 46 38

    opened by lesbaa 0
  • "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.

    opened by fthebaud 0
  • chrome locking up

    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

    opened by crobinson42 4
  • WordPress / Gutenberg 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

    opened by slushman 0
Owner
React Scope
Visualize your React components as you interact with your web application.
React Scope
Storybook-addon-message-bus - Interact with message bus via Storybook UI

Storybook Addon Message Bus Storybook Addon w/ GUI for interacting with Message

Prashis 2 Jan 8, 2022
Braian D. Vaylet 16 Aug 3, 2022
Lazerpay-react - Lazerpay SDK allows you accept payments easily in your react application

Lazerpay Official react sdk Lazerpay SDK allows you accept payments easily in yo

LazerPay 16 Sep 23, 2022
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

null 143 Sep 17, 2022
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

Murodjon Tursunpulatov 3 Jul 5, 2021
TaxiApp-react-typescript - A simple taxi application that allows you to look for a taxi nearby your place

Taxi Application A simple taxi application that allows you to look for a taxi ne

carmen 1 Aug 31, 2022
F-Curator - An offline application that comes at you all day long, and curate your own web favorites

F-Curator F-Curator is an offline application that comes at you all day long and

UIUX Lab 14 Sep 14, 2022
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

Buck DeFore 462 May 22, 2022
React-practice - A tool which organize daily activites, and gives you a list where you can mark completed tasks

React Todo-app Todo-list Todo-list project: Todo is a tool which organize daily

Mithlesh kumar 5 Apr 18, 2022
In this course you learn how to use MUI components in your React applications

React + MUI In this course you learn how to use MUI components in your React applications. But, what is MUI? MUI offers a comprehensive suite of UI to

AmirHossein Mohammadi 5 Jul 25, 2022
Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

null 3 Dec 30, 2021
React-Application - The Real time chat application for chatting uisng socket.io

This is the Real time chat application for chatting uisng socket.io

Anurag creator 5 May 9, 2022
This application is being constructed by combining small open source demos into one big application

Live Demo on Heroku If this doesn't work, it's probably because it exceeds Heroku's 500MB memory quota for the free tier. Sorry about that. It does wo

null 0 Dec 10, 2021
General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

null 12 Dec 4, 2021
💶 The package allows you accept payment using Lazerpay in your react native mobile app ⚡️

Lazerpay Official react-native sdk Lazerpay SDK allows you accept payments easily in your react-native application Installation npm install lazerpay-r

LazerPay 27 Sep 3, 2022
Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

ABU SAID 30 Sep 21, 2022
🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

Software Developer Folio ⚡️ A clean, beautiful and responsive portfolio template for Developers! Just change src/portfolio.js to get your personal por

Saad Pasta 3.5k Sep 29, 2022
Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Nishant Tomar 1 Dec 25, 2021
A plugin enables you to import a Markdown file as various formats on your vite project

vite-plugin-mdoc A plugin enables you to import a Markdown file as various forma

3lang 3 May 18, 2022