GithubHelp home page GithubHelp logo

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

React Scope's Projects

react-scope icon react-scope

Visualize your React components as you interact with your application.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.