+
+
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.
+
+
+
+
+ 
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+ Website
+
+
+
You can view your application's file structure and click on a snapshot to view
+your app's state. State can be visualized in a Component Graph, JSON Tree, or
+Performance Graph. Snapshots can be compared with the previous snapshot, which can
+be viewed in Diff mode.
+
+
+
+
+
+
+
+
Whenever the state is changed (whenever setState, 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.
+
+
+
You can save a series of state snapshots and use it to analyze changes in
+component render performance between the current and the previous series of snapshots.
+You can also name specific snapshots and compare all snapshots with the same
+name.
+
+
+
When toggled to a specific snapshot, a visualization of the individual
+components of the snapshot will be displayed. This can be done under the same
+Performance tab where the snapshots are rendered. You will also find details of
+each component upon hovering.
+
+
+
Download the recorded snapshots as a JSON file and upload them to access state trees across different sessions.
+
+
+
+
+
+
+
+
If Reactime loses its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. You'll notice a circle located to the right of the button, which will appear as either red (indicating disconnection) or green (signifying a successful reconnection).
+
+
+
+
+
+
+
+
One of the most common issues that affects performance in React is unnecessary
+render cycles. This problem can be fixed by checking your renders in the
+Performance tab in Chrome DevTools under the Reactime panel.
+
+
+
Using the actions sidebar, a user can jump to any previously recorded snapshots.
+Hitting the jump button on any snapshot will allow a user to view state data at
+any point in the history of the target application.
+
+
+
Reactime offers full support for Gatsby applications. You would be able to
+identify unnecessary renders, duration of each rendering, travel-debugging
+features and visual representation of the tree components.
+
+
+
Reactime offers debugging and performance tools for Next.js apps: time-traveling
+debugging, preventing unnecessary component re-renders and making your
+application faster.
+
+
+
Reactime offers debugging and performance tools for Remix apps (in beta). Support still
+needs to be added for multi-route time traveling. Every other feature works.
+
+
+
Reactime offers support for TypeScript applications using stateful class
+components and functional components. Further testing and development is
+required for custom hooks and Concurrent Mode.
+
+
+
After cloning this repository, developers can simply run npm run docs at the
+root level and serve the dynamically generated /docs/index.html file on a
+browser. Doing so will provide a readable, extensible, and interactive GUI view
+of the structure and interfaces of the codebase.
+
+
+
+- In-app tab-specific tutorial walkthroughs
+- Hover over a component to view tooltip details on state visualizations
+- Double-click to collapse child components
+- Click to focus on a portion of the component map
+- A dropdown to support the development of projects on multiple tabs
+- Intuitive navigation between state snapshots
+- Locked/unlocked feature allowing temporary pause of state monitoring
+
+
What's New!
+
+
Reactime 22.0 heralds significant enhancements, addressing core performance issues and fortifying the overall application's stability and reliability. In our pursuit of consistent evolution, we've updated outdated packages and transitioned state management to Redux Toolkit. This strategic shift not only modernizes our tech stack but also ensures our application is positioned for easier maintenance and scalability in the future. Complementing these upgrades, this release also mends various bugs. The debut of features like the reconnection button, a status icon, and the integration of key web metrics – Cumulative Layout Shift (CLS) and Interaction To Next Paint (INP) – amplifies its functionality and offers users a more refined experience.
+
Taking a deeper look
+
Addressing the persistent disconnection/black screen issues that occasionally affected users during regular application use, we made decisive improvements by removing the "keepAlive" function and implementing robust logic to fix the core issue. This enabled us to refine the communication protocol between our application and the Chrome extension API, delivering a more consistent and stable connection. To further enhance the user experience and foster resilience, we introduced a user-friendly reconnection feature. This not only offers users a swift recovery route but also acts as an added layer of protection against any unexpected disconnections in the future.
+
In an effort to improve maintainability, scalability, and longevity, we updated and phased out certain dependencies. To name a few, we moved away from the Immer library and transitioned our state management to use Redux Toolkit, while upgrading the Web Vitals API from version 1.1.2 to 3.5.0, allowing us to harness a broader range of web metrics. As part of this transition, we also converted all of the existing tests to work with the updated state management system, while further expanding testing suites to increase overall testing coverage. Lastly, we achieved a notable increase in TypeScript coverage, strengthening code quality and early detection of potential development issues.
+
For an improved user experience, we set our sights on several impactful enhancements. First on our list is the reconnection feature, designed as a protective measure for those unexpected moments when a user gets disconnected. In such events, an intuitive pop-up dialog will instantly emerge, offering users a seamless way to dive right back into their session, while also offering the option to download recorded snapshots of state as a JSON file. Complementing this, we've integrated a dynamic status indicator that transparently displays a user's current app status, highlighting whether they're online or offline. But that's not all. We've enriched the application with two vital web performance metrics: Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). These metrics are pivotal, providing developers with insights into layout stability and responsiveness, empowering them to optimize user interactions with precision.
+
If you would like to read more about previous releases, click here!
+
+
+
Installation
+
+
To get started, install the Reactime
+extension
+from Chrome Web Store.
+
After installing Reactime, you can test its functionalities with your React
+application in development mode.
+
Please note, the time jumping feature will ONLY work when your
+application is running in development mode. In production mode, you are
+able to view your application’s component map but no additional features.
+
NOTE: The React Developer Tools
+extension
+is also required for Reactime to run, if you do not already have it installed on
+your browser.
+
Go to Chrome Extensions (make sure Chrome Extension is in Developer Mode) for
+manual installation in (https://developer.chrome.com/extensions/faq#faq-dev-01)
+and click on Load Unpacked. Use src/extension/build/ to load this extension.
+Turn on 'Allow access to file URLs' in the extension details page if testing
+locally.
+
Please refer to Developer Install for a detailed guide:
+
Refer DEVELOPER README for more info on the project, and
+instructions on building from source.
+
After installing the Chrome extension, just open up your project in the browser.
+
Then open up your Chrome DevTools and navigate to the Reactime panel.
+
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 of
+times until you see Reactime running.
+
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
+
Try refreshing the application you want to test and refresh the DevTools by
+clicking the right mouse button “Reload frame”.
+
Reactime is an open-source project, and we'd love to hear from you about
+improving the user experience. Please read DEVELOPER README,
+and create a pull request (or issue) to propose and collaborate on changes to Reactime.
+
With the release of Node v18.12.1(LTS) on 11/4/22, the script has been updated to
+'npm run dev' | 'npm run build' for backwards compatibility.
For version
+Node v16.16.0, please use script 'npm run devlegacy' | 'npm run buildlegacy'
+
+
+
This project is licensed under the MIT License - see the LICENSE file
+for details.
+
