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 Recoil, Context API, conditional state routing, Hooks (useState, useEffect) and functional components. Version 5 removes the requirement to install an npm package, adds support for apps using Recoil, adds new Data Flow visualization and Component Map visualization, 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. 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 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. Jumping 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. Performance Metrics 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. 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 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 Authors 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
- (2020-09-17) Jinseon Shin: Super useful tool for React developers. Easy to implement and great visualizer!
- (2020-09-13) Alex Jo: Awesome dev tool, very useful for debugging!
- (2020-09-13) Peter Matthews: Heard about this via the Medium article. Great tool, thanks for sharing
- (2020-09-04) alexander landeros: Very useful tool for React!
- (2020-09-04) Alexander Kim: So useful. Such a great tool.
- (2020-09-04) Joal Kim: What a great dev tool! The best part is definitely the data flow visualization. Really cool, and so fast. I'd recommend.
- (2020-09-04) Connor Rose Delisle: Really helpful, and great coverage for Recoil too!
- (2020-09-03) Michelle Holland: Super useful tool, especially the Recoil data flow visualization. So awesome! Definitely recommend to any React developer.
- (2020-09-03) Justin Choo: Awesome dev tool. Really helped me alot debugging my app!!
- (2020-09-03) Spenser Schwartz: This is a great dev tool! For anyone who uses React, you'll do yourself a favor by checking out this extension.
- (2019-11-22) Krisztian Feher: Unfortunately with our large application using antd, redux, class components and a mixture or hooks the extension does absolutely nothing.
- (2019-08-15) Sophie Nye: What a great idea! Super helpful!
- (2019-08-15) Bryan Lee: Great developer tool! I loved how easy it was to implement on my existing codebase
- (2019-08-15) Ryan Dang: Nice devtool for any React developer to manage and view state.
- (2019-08-14) Sungtae Kim: wow this is awesome!! as someone new to react, this is a great debugging tool!