gem-hunter
Language: TypeScript
Developer tool for time travel debugging and performance monitoring in React applications.
On the main page, there are two main selections from the dropdown panel:
Reactime makes it easy to save and share your application's state history:
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:
Reactime 26.0 brings a complete overhaul to the React debugging experience, featuring:
New Context Data Display
Enhanced Time Travel Debugging
Modern UI Overhaul
Major Technical Improvements
These updates make Reactime more powerful, reliable, and user-friendly than ever before, setting a new standard for React debugging tools.
There are two ways to open the Reactime panel:
DevTools
Context Menu
Once launched, Reactime will automatically begin monitoring your application's state changes and performance metrics.
We welcome contributions from developers of all skill levels! For detailed guidelines on how to contribute:
Get Started
Build Process
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
Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work.
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.
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.
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
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.
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.