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 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 Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
Version 4 removes the requirement to install an npm package, adds improved support for apps using Hooks + Context API, and provides render-timing information for components in the target app (as long as you're running in dev mode). The new version also fixes a number of bugs, adds key-commands for navigating through state changes, improves the user experience through more declarative titles in the actions panel, and extends support for components with conditional state fields. The new Performance tab shows detailed bubble chart visualizations of component dependencies and render times (dev mode only).
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.
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.
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.
Time-travel allows you to jump to any previous recorded snapshots. Hitting the jump button on any snapshot will change the DOM by setting their state.
The new Performance tab displays a nested bubble that helps users navigate component dependencies and visualize relative render times of components for help with performance optimization.
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 will lose all functionality while the 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
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