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

Install the Reactime extension from the Chrome Web Store
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:

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

Get Started
- Fork the repository
- Review our comprehensive Developer README
- Set up your local development environment
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:

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.

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

React Performance Tool 🏆 Nominated for React Open Source Awards 2020