ReacTime - Time Traveling State Debugger for React App


Meet Reactime — Time Traveling State Debugger - Now Supporting Concurrent Mode, Routers, and more
Chrome dev tool for tracking and visualizing state changes in React applications | npm |
GitHub Please add star. (请给我们加星:star2::pray:

Developers need robust tools for debugging their apps. Redux DevTools provides time-traveling debugging, and that’s fine and great and all, but what if you’re using Hooks, or Context API, or regular old stateful class-based components? What if you’re experimenting with new features like Concurrent Mode and Suspense?

The answer: Reactime!

Introducing Reactime 3.0 Beta

Reactime is an open-source Chrome developer tool — inspired by Redux DevTools — designed to help developers debug React applications by tracking and visualizing state changes. It allows the developer to revert to any previously recorded state, streamlining state debugging especially as an application scales.

Initially, Reactime only supported stateful components that shared state by prop drilling; however, it now has beta support for Context API, conditional routing and the useState Hook, to meet the growing demand for functional components and the reliance on Context API to minimize prop drilling. Also, it now has added support for experimental React features like Concurrent Mode and Suspense, as well as expanded support for hooks like useReducer, useEffect, and more, and support for React Router, visually persisting state changes across different pages.

How does it work?

Reactime enables developers to revert to previously recorded snapshots.

The latest beta release of Reactime works by recording snapshots of state whenever it is changed, allowing the developer to cycle back to any previously recorded snapshot. When in playback mode, it will iterate through the recorded snapshots , so you can easily visualize the steps for debugging.
Reactime comes with a visualizer using D3, providing a tree graph illustrating state changes, and hover/zoom functionality on each node to see the changes in great detail. Also, Reactime calculates and provides the diff between each snapshot and captures the state changes as downloadable JSON.

How Reactime helps

The React community is growing every day, with the emerging trend towards Context API, Hooks, and functional components in React. Reactime has added features aims to bridge the gap between new ideas and amazing products, especially with the advent of Concurrent React and the implications it will have on the build process moving forward.

The Reactime team is excited about its latest beta release, and if you’re interested, please visit our GitHub page and try out our extension.

Please add star. (请给我们加星:star2::pray:)| GitHub!