reactime

State Debugger for React

Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.

This dev tool is for React apps using stateful components and prop drilling, and has beta support for Concurrent Mode, Suspense, Context API, conditional state routing, Hooks (useState & useEffect) and functional components.

Note - you may see some unexpected behavior in Reactime if trying to directly manipulate the DOM either with jQuery, or vanilla Javascript.

Two parts are needed for this tool to function. The chrome extension must be installed, and the NPM package must be installed and used in the React code.

After successfully installing the chrome extension, you can test Reactime functionalities in the demo repositories below. In your chrome extension settings, make sure to enable access to file urls.

• Calculator
• Bitcoin Price Index

Installing

1. Download the extension from Chrome Web Store.

2. Install the npm package in your code.

npm i reactime

1. Call the library method on your root container after rendering your App.

import reactime from 'reactime';

const rootContainer = document.getElementById('root');
ReactDOM.render(<App />, rootContainer);

reactime(rootContainer);

1. If you are using Concurrent Mode, call the library method on your created Root like so:

import reactime from 'reactime';

const _reactRootContainer = ReactDOM.createRoot(document.getElementById('root'));
_reactRootContainer.render(<App />);

reactime(_reactRootContainer);

1. Make sure to update your React, ReactDOM, and Router versions to avoid funky behavior!

2. Done! That's all you have to do to link your React project to our library.

How to Use

After installing both the Chrome extension and the npm package, just open up your project in the browser.

Then open up your Chrome DevTools. There'll be a new tab called Reactime.

Features

Recording

Whenever state is changed (whenever setState or useState 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 JSON or a tree. Also, snapshots can be diffed with the previous snapshot, which can be viewed under the Diff tab.

Jumping

Jumping is the most important feature of all. It allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.

And Much More

• multiple tree graph branches depicting state changes
• tree graph hover functionality to view state changes
• ability to pan and zoom tree graph
• multiple tabs support
• 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

Authors

• Ryan Dang - @rydang
• Bryan Lee - @mylee1995
• Josh Kim - @joshua0308
• Sierra Swaby - @starkspark
• Ruth Anam - @peachiecodes
• David Chai - @davidchaidev
• Yujin Kang - @yujinkay
• Andy Wong - @andywongdev
• Chris Flannery - @chriswillsflannery
• Rajeeb Banstola - @rajeebthegreat
• Prasanna Malla - @prasmalla
• Rocky Lin - @rocky9413

License

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