At Replay, we’re building a true time-travel debugger for JavaScript. Our technology records everything that happens in a browser, so you can use it to debug any page regardless of what frameworks or libraries were used to build it. That said, framework-specific devtools are a valuable part of the debugging experience. By Mark Erikson.
Replay’s recording capability is built into our custom forks of the Firefox and Chrome browsers and Node runtime. Firefox has been our primary recording browser thus far, but in Q4 2022 we started improving the Chrome fork to reach feature parity with Firefox. One of the missing features in Chrome was React DevTools support.
The article then describes in depth:
- Background
- How do the React DevTools work?
- Replay’s React DevTools support in Firefox
- Replay’s recording analysis APIs
- Using “Routines” for recording analysis
- Browser integration, stubs, and annotation timestamps
- Writing annotations for processing recordings
- Evaluating code in recording pauses
- React DevTools routine implementation
- React DevTools client-side implementation
- Deployment
… and more. The React DevTools backend was only designed to run in a real browser, and author pretty sure our protocol API wasn’t designed with “evaluate entire JS bundles” in mind. Happily, both were designed well enough that something like this was possible. Along the way, author learned a lot about our backend protocol API, how pauses work, evaluating JS as strings, and doing development + deployment on our backend repo. Godo read!
[Read More]