A Chrome extension that helps debug React applications by memorizing the state of components with every render.
A time-traveling, state debugger for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
Nominated for the Productivity Booster award at React Open Source Awards 2020!
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.
https://www.npmjs.com/package/reactime
https://github.com/open-source-labs/reactime
Check out the links above to find out the process of getting Reactime required for your project.
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, 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.
Jumping: The most important feature of all. Jumping to any previous recorded snapshot. Hitting the jump button on any snapshot will change the DOM by setting their state. One important thing to note. This library does not work well when mixing React with direct DOM manipulation.
TypeScript: Reactime offers beta support for TypeScript applications using stateful class components and functional components with useState hooks. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.
Features includes:
- slider to move through snapshots quickly
- play button to move through snapshots automatically
- pause button, which stops recording each snapshot
- lock button to freeze the DOM in place. setState will lose all functionality while the extension is locked
- persist button to keep snapshots upon refresh (handy when changing code and debugging)
- multiple tree graph branches depicting state changes with hover functionality to view state changes and the ability to pan/zoom in on the tree graph
- multiple tabs support
- export/import the current snapshots in memory
- declarative titles in the actions panel
- extended support for components with conditional state fields
- a Sandbox utility to aid future expansion
Authors:
Ryan Dang - github.com/rydang
Bryan Lee - github.com/mylee1995
Josh Kim - github.com/joshua0308
Sierra Swaby - github.com/starkspark
Ruth Anam - github.com/peachiecodes
David Chai - github.com/davidchai717
Yujin Kang - github.com/yujinkay
Andy Wong - github.com/andywongdev
Chris Flannery - github.com/chriswillsflannery
Prasanna Malla - github.com/prasmalla
Rajeeb Banstola - github.com/rajeebthegreat
Rocky Lin - github.com/rocky9413
Abaas Khorrami - github.com/dubalol
Ergi Shehu - github.com/Ergi516
Joshua Howard - github.com/Joshua-Howard
Raymond Kwan - github.com/rkwn
Website: http://reactime.io/
