Skip to content
/ Reactime Public

Developer tool for time travel debugging and performance monitoring in React applications.

www.reacti.me

License

MIT license
2.2k stars 201 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

open-source-labs/Reactime

BranchesTags

Repository files navigation


React Performance Tool
🏆 Nominated for React Open Source Awards 2020

A powerful Chrome extension that enhances React development with time-travel debugging and advanced performance monitoring

Read our Medium Article to learn more about Reactime’s behind-the-scenes and development process!


Chrome Web Store Chrome Web Store Users Chrome Web Store Rating


🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇫🇷   VERSION FRANÇAISE   •   🇮🇩   VERSI BAHASA INDONESIA   •   👩‍💻 Developer README

✨ Key Features

🔍 State Visualization

  • Multiple Views: Visualize your application state through Component Graphs, JSON Trees, Performance Graphs, and Accessibility Trees
  • History Timeline: Track state changes over time with an intuitive history visualization
  • Web Metrics: Monitor critical performance metrics in real-time
  • Accessibility Insights: Analyze your app's accessibility tree for each state change

On the main page, there are two main selections from the dropdown panel:

  • Timejump: View and navigate through the snapshot history of your application's state. You can jump to any point in time to see how the state evolves across changes. You can also use the play button to replay each state change automatically.
  • Providers / Consumers: Understand your application's context dependencies and their interactions better through visualizing its provider and consumer relationships.


⏱️ Time-Travel Debugging

  • State Snapshots: Capture and navigate through your application's state history
  • Playback Controls: Automatically replay state changes with adjustable speed
  • Jump Points: Instantly navigate to any previous state
  • Diff Comparisons: Compare states between snapshots


📊 Performance Analysis

  • Component Metrics: Track render times and performance bottlenecks
  • Series Comparison: Compare performance across different sets of state changes
  • Re-render Detection: Identify and fix unnecessary render cycles
  • Web Vitals: Monitor Core Web Vitals and other performance metrics

🔄 Modern Framework Support

  • Full compatibility with Next.js, Remix, Recoil, and Gatsby
  • TypeScript support for class and functional components
  • Support for React Hooks and Context API

💾 State Persistence & Sharing

Reactime makes it easy to save and share your application's state history:

  • Export State History: Save your recorded snapshots as a JSON file for later analysis or sharing
  • Import Previous Sessions: Upload previously saved snapshots to compare state changes across different sessions
  • Cross-Session Analysis: Compare performance and state changes between different development sessions


📚 Interactive Documentation

Reactime provides comprehensive documentation to help developers understand its architecture and APIs: After cloning this repository, developers can simply run npm run docs at the root level and serve the dynamically generated /docs/index.html provding:

  • Interactive component diagrams
  • Type definitions and interfaces
  • Codebase architecture overview
  • API references and examples

🎉 What's New!

Reactime 26.0 brings a complete overhaul to the React debugging experience, featuring:

  • New Context Data Display

    • First-ever visualization of useContext hook state changes
    • Clear mapping of provider-consumer relationships
    • Real-time context state value monitoring
    • Detailed provider data visualization

  • Enhanced Time Travel Debugging

    • Redesigned slider interface positioned alongside snapshots
    • Variable playback speed controls
    • More intuitive state navigation
    • Improved snapshot visualization

  • Modern UI Overhaul

    • Sleek, contemporary design with rounded components
    • Intuitive layout improvements
    • New dark mode support
    • Enhanced visual hierarchy

  • Major Technical Improvements

    • Fixed connection persistence during idle time and tab switches
    • Restored accessibility tree visualization
    • Resolved state capture issues for function-based useState hooks
    • Improved overall extension reliability and performance

These updates make Reactime more powerful, reliable, and user-friendly than ever before, setting a new standard for React debugging tools.

🚀 Getting Started

Installation

  1. Install the Reactime extension from the Chrome Web Store
  2. Install the required React Developer Tools extension if you haven't already

Prerequisites

  • Your React application must be running in development mode
  • React Developer Tools extension must be installed
  • Chrome browser (version 80 or higher recommended)

Launch Reactime

There are two ways to open the Reactime panel:

  1. DevTools

    • Open Chrome DevTools (F12 or ⌘+⌥+I)
    • Navigate to the "Reactime" tab
    • This will open Reactime as a panel within Chrome DevTools, integrated alongside your other development tools

  2. Context Menu

    • Right-click anywhere on your React application
    • Select "Reactime" from the context menu
    • This will open Reactime in a separate popup window which you can resize and position independently

Once launched, Reactime will automatically begin monitoring your application's state changes and performance metrics.

🤝 Contributing to Reactime

We welcome contributions from developers of all skill levels! For detailed guidelines on how to contribute:

  1. Get Started

    • Fork the repository
    • Review our comprehensive Developer README
    • Set up your local development environment

  2. Build Process

    • Follow our build instructions in the Developer README
    • Test your changes thoroughly
    • Submit a pull request

Join our growing community of contributors and help shape the future of React debugging tools! For detailed contribution guidelines and project architecture information, please refer to our 👩‍💻 Developer README and 🙋 Contributing README

🛠️ 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:

  1. 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.

  2. 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.

  3. 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.

❓ Node version compatibility

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'

✍️ Authors

⚖️ License

This project is licensed under the MIT License - see the LICENSE file for details.

About

Developer tool for time travel debugging and performance monitoring in React applications.

www.reacti.me

Topics

chrome-extension performance state-management accessibility reactjs rendering nextjs gatsby renderer time-travel react-devtools devtools-extension react-fiber remixjs

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Security policy

Security policy
Activity
Custom properties

Stars

2.2k stars

Watchers

23 watching

Forks

201 forks
Report repository

Releases 14

v26.0 Reactime Latest
Jan 8, 2025
+ 13 releases

Sponsor this project

Packages

No packages published

Contributors 114
+ 100 contributors

Languages