Reactime, Time Traveling State Debugger: Now Supporting Concurrent Mode, Routers, and more

Chrome dev tool for tracking and visualizing state changes in React applications

Intro

Developers need robust tools for debugging their apps. Redux DevTools provides time-traveling debugging, and that’s fine and great and all, but what if you’re using Hooks, or Context API, or regular old stateful class-based components? What if you’re experimenting with new features like Concurrent Mode and Suspense?

Well my bionic friends, you’re in luck. This is where Reactime comes in.

Introducing Reactime 3.0 - Supercharged for the Future of React

Reactime is an open-source Chrome developer tool - inspired by Redux DevTools - which allows developers to visually inspect the state of their app at any given moment, step forwards or backwards through time, import and export a snapshot of their current state, persist state across refreshes, yada yada yada… you get the idea.

The real magic happens when you introducing scaling. Because Reactime runs a realtime d3 visualiser which visually grows a tree displaying all of your state “branches”, you can easily figure out where a bug is halting your processes and how best to move forward. Not to mention, it now has added support for experimental React features like Concurrent Mode and Suspense, as well as expanded support for hooks like useContext, useReducer, useEffect, and more, and support for React Router, visually persisting state changes across different pages. (please clap)

How does it work?

Reactime 3.0 works by recording and caching snapshots of your app’s state and browser history at any given moment and constructing a historical tree based on the cache, and allows the developer to “play back” all of the state changes they’ve made on a given branch, providing a really granular look at what’s going on during different DOM events.

It also provides the diff between each snapshot and captures the changes as downloadable JSON.

How Reactime helps

The React community is growing every day, and with new developers comes new challenges, tools and technologies. Reactime aims to bridge the gap between new ideas and amazing products, especially with the advent of Concurrent React and the implications it will have on the build process moving forward.

We’d love for you to try Reactime out - play around, break things, put in a PR, and let us know what you think! If you’re interested, please visit our Github and try out our chrome extension.