A Chrome extension that helps debug React applications by memorizing the state of components with every render.
Reactime was nominated for the Productivity Booster award at React Open Source Awards 2020!
Reactime is a debugging tool for React developers. It records application state changes as 'snapshots' and allows the user to jump to any previously recorded state.
This tool is for React apps using stateful components and prop drilling, and has beta support for Recoil, Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
Version 6 enhanced the user experience with new visualizations that better contextualizes state data and component relationships within a target application while fixing various bugs. Time jump can now be accomplished in the History tab by clicking any node. Both the History and Map tabs now feature a dynamic legend making visualizations more expressive and meaningful. The core visualizer in the Map tab has been replaced and now offers various orientations, layouts, and node linkages. The Performance tab now displays snapshots as a stacked bar chart which provides the user a birds eye view of component rendering times as state changes. This latest version incorporates a new onHover functionality across the visualizations wherein a user can hover a component representation (e.g. node in the Map tab or a bar in the pPerformance tab) and its corresponding HTML element will highlight within the DOM.
Installation
Install the Reactime extension from Chrome Web Store. Alternatively, 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.
Note for v3 and prior users: NPM package no longer required.
Then open up your Chrome DevTools and navigate to the Reactime tab.
Features
Recording
Whenever state is changed (whenever setState or 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.
Viewing State
You can click on a snapshot to view your app's state. State can be visualized in JSON format or a hierarchy tree. Also, snapshots can be diffed with the previous snapshot, which can be viewed under the Diff tab.
Viewing Application
You can view the entire component hierarchy of the target application in the Map tab
Jumping
Time-travel allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot or clicking any node in the history tab will change the DOM by setting their state
Performance Metrics
The new Performance tab displays a stacked bar chart of snapshots to help users visualize and identify potential trends or bottle necks in component rendering time. Each bar has an onHover tooltip for additional information as well as DOM highlighting
Additional Features:
-recoil data flow visualization
-component map visualization
-multiple tree graph branches depicting state changes
-tree graph hover functionality to view state changes
-ability to pan and zoom tree graph
-multiple tabs support
-a slider to move through snapshots quickly
-a play button to move through snapshots automatically
-a pause button, which stops recording each snapshot
-a lock button to freeze the DOM in place. setState loses functionality when extension is locked
-a persist button to keep snapshots upon refresh (handy when changing code and debugging)
-export/import the current snapshots in memory
-declarative titles in the actions panel
-extended support for components with conditional state fields
Authors
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 - github.com/crperezt
Edwin Menendez - github.com/edwinjmenendez
Gabriela Jardim Aquino - github.com/aquinojardim
Greg Panciera - github.com/gpanciera
Nathanael Wa Mwenze - github.com/nmwenz90
Ryan Dang - github.com/rydang
Bryan Lee - github.com/mylee1995
Josh Kim - github.com/joshua0308
Sierra Swaby - github.com/starkspark
Ruth Anam - github.com/peachiecodes
David Chai - github.com/davidchaidev
Yujin Kang - github.com/yujinkay
Andy Wong - github.com/andywongdev
Chris Flannery - github.com/chriswillsflannery
Rajeeb Banstola - github.com/rajeebthegreat
Prasanna Malla - github.com/prasmalla
Rocky Lin - github.com/rocky9413
Abaas Khorrami - github.com/dubalol
Ergi Shehu - github.com/Ergi516
Raymond Kwan - github.com/rkwn
Joshua Howard - github.com/Joshua-Howard
