Reactime

A Chrome extension for time travel debugging and performance monitoring in React applications.

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 and Accessibility Tree - Provider/Consumer Panel for useContext Hook - Import and Export Snapshots of 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 - Ability to Reconnect - Web Performance Metrics - Tutorial Walkthrough - Prop Visualization - Intuitive Layout and Modern Design - Dark Mode What’s New! Reactime 26.0 introduces transformative updates that redefine React debugging. The groundbreaking Providers/Consumers Panel now captures and visualizes state changes from useContext hooks, offering a real-time view of provider-consumer relationships and live context state values. A revamped time travel slider delivers enhanced control over debugging with intuitive navigation and playthrough options. The extension also boasts a modernized UI with dark mode for better usability, improved reliability through critical bug fixes, and the restoration of the accessibility tree tab for addressing potential accessibility issues. With these innovations, Reactime v26 empowers developers to streamline workflows and optimize complex state flows like never before. Troubleshooting: ❓ Why is Reactime not recording new state changes? Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. ❓ Why isn’t Reactime finding my hooks? Reactime detects and monitors hooks by traversing your application’s unminified React code in development mode. If your build process is minifying or uglifying your code—even for development builds—Reactime may not be able to properly locate and track your hooks. To fix this: Ensure a true development build: Double-check your bundler or build tool configuration (e.g., Webpack, Babel, Vite, etc.) to make sure that your application is not minimized or uglified in development mode. For example, with Webpack, make sure you’re running in mode: 'development', which should disable default minification. In a Create React App project, simply running npm start or yarn start will automatically configure a non-minified development build. Check for overrides: Ensure there are no custom Babel or Webpack plugins that minify your code, especially if you’re using frameworks like Next.js or Gatsby. Sometimes additional plugins or scripts might be running under the hood. Restart & rebuild: After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. ❓ 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 of 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 ❓ 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 the 👩‍💻 Developer README, and create a pull request (or issue) to propose and collaborate on changes to Reactime.