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.

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

3. 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(
    <App />,
    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:

  • - component was unnecessarily re-rendered.
  • - component was re-rendered
  • - 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