Nominated for the Productivity Booster award

👑 React Open Source Awards 2020 👑

Reactime is a debugging tool for React developers. It records a snapshot whenever a target application’s state is changed and allows the user to jump to any previously recorded state.

Currently, Reactime supports React apps using stateful components and Hooks, with beta support for Recoil and Context API.

Reactime verision 6.0 beta extends the core functionality by including support for Recoil. The latest release incorporates additional visualizations for component relationships as well as atom-selector relationships for Recoil applications. Reactime 6.0 includes expanded typedoc documentation for developers looking to contribute to the source code.

After installing Reactime, you can test its functionalities with the following demo repositories:

Installation

To get started, install the Reactime extension from Chrome Web Store.

Alternative Installation

Use src/extension/build/build.zip for manual installation in Developer mode. Turn on ‘Allow access to file URLs’ in extension details page if testing locally.

*** for depracated installation steps, click here ***

How to Use

After installing the Chrome extension, just open up your project in the browser.

Then open up your Chrome DevTools and navigate to the Reactime panel.

Features

Recording

Whenever state is changed (whenever setState, useState, or useRecoilState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.

Viewing

You can click on a snapshot to view your app’s state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. In a Recoil application, flow of data from atoms to components is visualized in the Relationships tab. Also, snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.

Jumping

Using the actions sidebar, a user can jump to any previous recorded snapshots. Hitting the jump button on any snapshot will allow a user to view state data at any point in the history of the target application.

TypeScript Support

Reactime offers beta support for TypeScript applications using stateful class components and functional components. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.

Documentation

After cloning this repository, developers can simply run npm run docs at the root level and serve the dynamically generated /docs/index.html file on a browser. Doing so will provide a readable, extensible, and interactive GUI view of the structure and interfaces of the codebase.

Additional Features

• hover functionality to view tooltip details on state visualizations
• ability to pan and zoom on state visualizations
• a dropdown to support development of projects on multiple tabs
• a slider to move through snapshots quickly
• a play button to move through snapshots automatically
• a pause button, which stops recording each snapshot
• a lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
• a persist button to keep snapshots upon refresh (handy when changing code and debugging)
• export/import the current snapshots in memory
• declarative titles in the actions sidebar

Authors

License

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