Skip to content

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

License

Notifications You must be signed in to change notification settings

SamuelTr13/Reactime---Open-Source-Product

 
 

Repository files navigation

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.


GitHub Build Status npm version BabelPresetPrefs LintPrefs


How To UseFeaturesWebsiteRead More

Reactime 15.0 adds a new visualization, allowing users to zone in on individual components of a specific snapshot. Additionally, a number of bug fixes have been implemented.

Currently, Reactime supports React apps (now including React Router apps) using stateful components and Hooks, with beta support for Recoil and Context API and frameworks like Gatsby and Next.js.

Previously, Reactime 14.0 added the exciting features below:

I. React Router Compatibility
Reactime is now compatible with React Router applications! Prior to Reactime 14.0, recording state snapshots as the user navigated across various routes was possible, but time travel debugging was only possible for the current route (i.e. jumping back to a prior state at a different route was not possible). In order to streamline debugging of applications with multiple routes, Reactime 14.0 added functionality that allows the user to time-travel back to different routes, including live updating in the browser to reflect the state of their application at that previously visited route.

II. Classifying State Snapshots by Route
The list of state snapshots in the Reactime dashboard is now classified by route to give the developer visual cues of the snapshot-route relationship and make time travel debugging of various routes easier.

III. Filtering Performance Metrics by Route
The Reactime dashboard includes a stacked bar graph showing render times for each component, with a separate bar stack for each snapshot. With Reactime 14.0, this composite bar graph can now be filtered by route to allow the developer to review detailed performance data by route.

After installing Reactime, you can test its functionalities with your React application in development mode.

Please note, the time jumping feature will ONLY work when your application is running in development mode. In production mode, you are able to view your application’s component map but no additional features.

Installation

To get started, install the Reactime extension from Chrome Web Store.

NOTE: The React Developer Tools extension is also required for Reactime to run, if you do not already have it installed on your browser.

Alternative Installation

Use src/extension/build/build.zip for manual installation in Developer mode. Turn on 'Allow access to file URLs' in extension details page if testing locally.

How to Use

After installing the Chrome extension, just open up your project in the browser.

Then open up your Chrome DevTools and navigate to the Reactime panel.

Troubleshooting

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 times until you see Reactime running.

There is a black screen instead of the Reactime extension

Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.

I found a bug in Reactime

Reactime is an open source project, and we’d really appreciate your help with improving user experience. Please create a pull request (or issue) to propose and collaborate on changes to a repository.

Features

🔹 Viewing

You can view your application's file structure and click on a snapshot to view your app's state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. Snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.


🔹 Snapshot Series and Action Comparison

You can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots. You can also name specific snapshots and compare all snapshots with the same name.


🔹 Components Comparison

When toggled to a specific snapshot, a visualization of the individual components of the snapshow will be displayed. This can be done under the same Performance tab where the snapshots are rendered. You will also find details of each component upon hovering.


🔹 Recording

Whenever state is changed (whenever setState, useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.


🔹 Re-render Optimization

One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.

🔹 Jumping

Using the actions sidebar, a user can jump to any previous recorded snapshots. Hitting the jump button on any snapshot will allow a user to view state data at any point in the history of the target application.

🔹 Gatsby

Reactime offers full support for Gatsby applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components.

🔹 Next.js

Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster.

🔹 TypeScript Support

Reactime offers beta support for TypeScript applications using stateful class components and functional components. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.

🔹 Documentation

After cloning this repository, developers can simply run npm run docs at the root level and serve the dynamically generated /docs/index.html file on a browser. Doing so will provide a readable, extensible, and interactive GUI view of the structure and interfaces of the codebase.

Additional Features

  • Identifying unnecessary re-renders
  • Single-click to view tooltip details on state visualizations
  • Double-click to collapse child components
  • A reverse filter with autofill to focus on a portion of the component map
  • Ability to pan and zoom on state visualizations
  • A dropdown to support development of projects on multiple tabs
  • A slider to move through snapshots quickly
  • A play button to move through snapshots automatically
  • A lock button, which stops recording each snapshot
  • A persist button to keep snapshots upon refresh (handy when changing code and debugging)
  • Download/upload the current snapshots in memory
  • Declarative titles in the actions sidebar
  • Interative Tutorial Walkthrough
  • Toggle feature allowing temporary pause of state monitoring

Bug Fixes

  • Search bar now searches for specific nodes successfully
  • Tab titles of chrome browser tabs not running an application in development mode are no longer affected by Reactime
  • Multiple black screens fixed
  • Improved UI and performance
  • No longer inject scripts to non-target applications

Read More

Authors

License

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 63.5%
  • JavaScript 25.0%
  • SCSS 7.5%
  • CSS 2.3%
  • HTML 1.5%
  • Sass 0.1%
  • Other 0.1%