A Chrome extension that helps debug React applications by memorizing the state of components with every render.
Reactime was nominated for the Productivity Booster award at React Open Source Awards 2020.
Reactime is an open source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency.
Features:
- Record Snapshots of Application State
- Time-Travel Debugging
- Snapshot Series Comparison
- Component Tree Visualization
- React Router Compatibility
- Component Render Time & Frequency
- Support for Gatsby, Next.js and Remix
- TypeScript Support
- Tutorial Walkthrough
What’s New!
Reactime 19.0 introduces a range of new and improved features aimed at improving performance by adding new UI features, as well as a revamping of the codebase to reflect current industry standards and better maintainability for future contributors.
UI Improvements:
We have made changes to the display of nested structures such as objects and arrays, making them collapsible and scrollable to better handle large amounts of data. Additionally, we have included component "key" information in the updated component information, and data now persists when hovering over it, eliminating the need to keep the cursor in one place.
Improvements Under the Hood:
To improve our testing process, we have made several changes, including migrating from Enzyme to React Testing Library. We have transitioned out of beta support for TypeScript as we implemented further TypeScript support throughout our codebase. Additionally, we have updated the traversal of the React Fiber Tree to extract useState data for previously unsupported edge cases with greater accuracy.
Troubleshooting:
Why is Reactime telling me that no React application is found?
Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple times until you see Reactime running.
Why do I need to have React Dev Tools enabled?
Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer
There is a black screen instead of the Reactime extension
Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
I found a bug in Reactime
Reactime is an open source project, and we'd love to hear from you about improving the user experience. Please read DEVELOPER README in the GitHub and create a pull request (or issue) to propose and collaborate on changes to Reactime.
