logo

Changelog 52: React component names ⚛️

We’re excited to release Original React component names for Chrome. When you open a replay that’s recorded with Chrome and view the React DevTools panel, the component names will be mapped.
profile photo
Jason Laster
Image without caption
We’re excited to release Original React component names for Chrome. When you open a replay that’s recorded with Chrome and view the React DevTools panel, the component names will be mapped.
This is a big deal because you’ll now be able to record a replay in any environment, inspect your application, and see the original component in React DevTools. This is an improvement over standard React DevTools, where you only see the original component names in development.
Image without caption
We are able to map the component names because we run React DevTools’s backend when we replay the recording where we have access to our Scope Mapping APIs. This is a big deal for us personally because it’s the first non-performance benefit of running a script at replay time vs record time.
Our goal is to build the React debugging environment from the future. Let us know what you’d like to see next!

A New Dimension

Tune in next week for our biggest release since we launched Replay DevTools in 2021. Time travel will never be the same.
Image without caption

Instant Replay

Last week’s Incremental Snapshots release slashed our P50 debugging start times. At this point, instant starts is a matter of optimization and engineering, not crazy R&D.
Image without caption

Chrome for Linux

Last week, we reduced our Chrome for Linux recorder’s overhead by 4X. With this improvement, recording a replay capable of time travel is now as fast as recording a session replay of the DOM.
We hope to cut our overhead in half again. This is incredible because you’d think that recording the browser would be far slower than recording the DOM, but in reality it's the opposite.
The thing to remember is that diffing the DOM is really intense, but our method of intercepting system calls is very light-weight.
Image without caption
Related posts
We share our plans on helping AIs resolve issues fully automatically
Over the past couple of years, JS frameworks like Next.js and Remix have gone full stack. We believe it’s time for DevTools to join the party!
We discuss a project for automatically fixing test failures
Powered by Notaku