Skip to content
chrome extension for react debugging and time travel
JavaScript CSS Other
Branch: master
Clone or download
Pull request Compare This branch is even with open-source-labs:master.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets final Aug 15, 2019
package updated package version Aug 15, 2019
src version 2.2 Aug 15, 2019
.eslintignore eslint fixed Aug 9, 2019
.eslintrc eslint config compatibility with prettier Aug 13, 2019
.gitignore gitignore build files Aug 15, 2019
.travis.yml removed deploy Aug 14, 2019
Dockerfile set up docker Aug 10, 2019
LICENSE renamed Aug 14, 2019
babel.config.js uninstalled unnecessary packages Aug 10, 2019
demo.gif updated readme for package Aug 14, 2019
docker-compose.yml test and lint Aug 13, 2019
package-lock.json new gif Aug 14, 2019
package.json new gif Aug 14, 2019
readme.md changed readmes Aug 15, 2019
webpack.config.js changed file structure of extension Aug 1, 2019

readme.md

Reactime: A Time Travel Debugger for React

GitHub Build Status npm version Dependencies DevDependencies Vulnerabilities

NPM

Demo of Reactime

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

One important thing to note. This devtool is for React apps using only stateful components and prop drilling. If you're using Redux, Hooks, Context, or functional components, this devtool will not function on your app.

Another thing is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn't change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.

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.

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.
const reactime = require('reactime');

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

reactime(rootContainer);
  1. 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 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.

Others

Other handy features include:

  • multiple tabs support
  • a slider to move through snapshots quickly
  • a play button to move through snapshots automatically
  • a pause which button 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

License

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

You can’t perform that action at this time.