We Rebuilt React DevTools with Replay Routines

I recently built our React DevTools support for Chromium. I used our time-travel debugging backend to inject the RDT logic into the paused browser at every React commit to extract the tree operations data.

This post covers how the React DevTools work, how our backend protocol API makes it possible to introspect the runtime behavior of a recorded app, and how I used those together to build this functionality.

This approach was only possible because of the magic of Replay's time-travel debugging! It also required a deep dive into the guts of the React DevTools implementation.

Had a lot of fun working on this :)

Next up: I'm already doing prototyping on Redux DevTools support!