Need help with react-chronoscope?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

oslabs-beta
165 Stars 3 Forks MIT License 203 Commits 0 Opened issues

Description

Developer tool to monitor React performance

Services available

!
?

Need anything else?

Contributors list

No Data


Developers' tool to monitor React performance and pinpoint areas that require further optimization

What Is React ChronoScope?

React ChronoScope is a performance monitoring tool for React developers. It visualizes React application's components displaying components that require further optimization.

React ChronoScope parses through the React application to construct an interactive tree diagram of the component hierarchy.

ReactChronoscope Demo

How To Install

  1. Download the extension from the Chrome Web Store.

  2. Install the npm package in the React application.

npm i react-chronoscope
  1. Import the npm library into root container file of React Application and invoke the library with the root container.
import chronoscope from 'react-chronoscope';
const container = document.querySelector('#root');
render(
    ,
    container,
    () => chronoscope(container)
);

How To Use

After installing both the Chrome Extension and the npm package, run the react application in the browser. Then open Chrome Developer Tools (Inspect) on the React Application and click on

React ChronoScope
at the top of the Developer Tools panel.

Features

  • Node-collapsible tree diagram that displays all hierarchy tree components of a React application.
  • Each Node has information vital for debugging and development such state, props and how optimized is the rendering process.
  • Color legend:

    • #FF0000
      - component was unnecessarily re-rendered.
    • #90EE90
      - component was re-rendered
    • #808080
      - component was not re-rendered
  • Timeline that illustrates when each component renders.

Team

  • Jason Huang - [https://github.com/jhmoon999]
  • Jimmy Mei - [https://github.com/Jimmei27]
  • Matt Peters - [https://github.com/mgpeters]
  • Sergiy Alariki - [https://github.com/Serrzhik]
  • Vinh Chau - [https://github.com/Vchau511]

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.