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!

🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇫🇷   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

• Garrett Chow - @garrettlchow
• Ellie Simens - @elliesimens
• Ragad Mohammed - @ragad-mohammed
• Daniel Ryczek - @dryczek14
• Patrice Pinardo - @pinardo88
• Haider Ali - @hali03
• Jose Luis Sanchez - @JoseSanchez1996
• Logan Nelsen - @ljn16
• Mel Koppens - @MelKoppens
• Amy Yang - @ay7991
• Eva Ury - @evaSUry
• Jesse Guerrero - @jguerrero35
• Oliver Cho - @Oliver-Cho
• Ben Margolius - @benmarg
• Eric Yun - @ericsngyun
• James Nghiem - @jemzir
• Wilton Lee - @wiltonlee948
• Louis Lam - @llam722
• Samuel Tran - @leumastr
• Brian Yang - @yangbrian310
• Emin Tahirov - @eminthrv
• Peng Dong - @d28601581
• Ozair Ghulam - @ozairgh
• Christina Or - @christinaor
• Khanh Bui - @AndyB909
• David Kim - @codejunkie7
• Robby Tipton - @RobbyTipton
• Kevin HoEun Lee - @khobread
• Christopher LeBrett - @fscgolden
• Joseph Park - @joeepark
• Kris Sorensen - @kris-sorensen
• Daljit Gill - @dgill05
• Ben Michareune - @bmichare
• Dane Corpion - @danecorpion
• Harry Fox - @StackOverFlowWhereArtThou
• Nathan Richardson - @BagelEnthusiast
• David Bernstein - @dangitbobbeh
• Joseph Stern - @josephiswhere
• Dennis Lopez - @DennisLpz
• Cole Styron - @colestyron
• Ali Rahman - @CourageWolf
• Caner Demir - @demircaner
• Kevin Ngo - @kev-ngo
• Becca Viner - @rtviner
• Caitlin Chan - @caitlinchan23
• Kim Mai Nguyen - @Nkmai
• Tania Lind - @lind-tania
• Alex Landeros - @AlexanderLanderos
• Chris Guizzetti - @guizzettic
• Jason Victor - @theqwertypusher
• Sanjay Lavingia - @sanjaylavingia
• Vincent Nguyen - @VNguyenCode
• Haejin Jo - @haejinjo
• Hien Nguyen - @hienqn
• Jack Crish - @JackC27
• Kevin Fey - @kevinfey
• Carlos Perez - @crperezt
• Edwin Menendez - @edwinjmenendez
• Gabriela Jardim Aquino - @aquinojardim
• Greg Panciera - @gpanciera
• Nathanael Wa Mwenze - @nmwenz90
• Ryan Dang - @rydang
• Bryan Lee - @mylee1995
• Josh Kim - @joshua0308
• Sierra Swaby - @starkspark
• Ruth Anam - @nusanam
• David Chai - @davidchaidev
• Yujin Kang - @yujinkay
• Andy Wong - @andynullwong
• Chris Flannery - @chriswillsflannery
• Rajeeb Banstola - @rajeebthegreat
• Prasanna Malla - @prasmalla
• Rocky Lin - @rocky9413
• Abaas Khorrami - @dubalol
• Ergi Shehu - @Ergi516
• Raymond Kwan - @rkwn
• Joshua Howard - @Joshua-Howard
• Lina Shin - @rxlina
• Andy Tsou - @andytsou19
• Feiyi Wu - @FreyaWu
• Viet Nguyen - @vnguyen95
• Alex Gomez - @alexgomez9
• Edar Liu - @liuedar
• Kristina Wallen - @kristinawallen
• Quan Le - @blachfog
• Robert Maeda - @robmaeda
• Lance Ziegler - @lanceziegler
• Ngoc Zwolinski - @ngoczwolinski
• Peter Lam - @dev-plam
• Zachary Freeman - @zacharydfreeman
• Jackie Yuan - @yuanjackie1
• Jasmine Noor - @jasnoo
• Minzo Kim - @minzo-kim
• Mark Teets - @MarkTeets
• Nick Huemmer - @NickHuemmer
• James McCollough - @j-mccoll
• Mike Bednarz - @mikebednarz
• Sergei Liubchenko - @sergeylvq
• Yididia Ketema - @yididiaketema
• Morah Geist - @morahgeist
• Eivind Del Fierro - @EivindDelFierro
• Kyle Bell - @KyEBell
• Sean Kelly - @brok3turtl3
• Christopher Stamper - @ctstamper
• Jimmy Phy - @jimmally
• Andrew Byun - @AndrewByun
• Kelvin Mirhan - @kelvinmirhan
• Jesse Rosengrant - @jrosengrant
• Liam Donaher - @leebology
• David Moore - @Solodt55
• John Banks - @Jbanks123
  

⚖️ License

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