This content originally appeared on Mark's Dev Blog and was authored by Mark's Dev Blog
I work at Replay.io, and I've spent all of this year building some incredibly advanced React debugging features that make use of our time-traveling backend API. The biggest one is our React DevTools integration. Early in 2023, I wrote a post for the Replay.io blog on How We Rebuilt React DevTools with Replay Routines, which recapped the initial working version. I've spent much of this year improving on that and building other related features.
At React Advanced, I got to share details on how the React DevTools work internally, and dive into how we extract React DevTools component tree data from recorded React apps using a combination of custom Chrome modifications and backend post-processing "routines" that leverage our time-travel API. Along the way, I showed off some crazy tricks like serializing JS functions as strings, sourcemapping original component names from production apps, and generating sourcemaps for React itself!
I also got to participate in a group panel discussion about Open Source, including questions about how we got involved and what it's like to "compete" with other OSS projects.
I've linked the livestream at the right timestamp for now, and will link the final video when it's live.
Building Better React DevTools with Replay Time Travel - video
And here's the slides:
Building Better React DevTools with Replay Time Travel - slides
and the OSS Panel video:
React Advanced Panel: Open Source - video
This content originally appeared on Mark's Dev Blog and was authored by Mark's Dev Blog
Mark's Dev Blog | Sciencx (2023-10-24T15:00:00+00:00) React Advanced 2023 – Building Better React DevTools with Replay Time Travel. Retrieved from https://www.scien.cx/2023/10/24/react-advanced-2023-building-better-react-devtools-with-replay-time-travel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.