Changelog 62: Elements Panel V3 🔍

This week we’re excited to share Elements Panel V3, which brings one second element loads.
profile photo
Jason Laster
Image without caption
Last week we shared React Panel V3. This week we’re continuing the pattern of major re-writes and are excited to share our new Elements Panel. For those keeping track at home, this is V3, and yes it only comes six months after V2!
When we shipped V2 in September we were able to bring load times down from 30 seconds to 13 seconds by migrating to our suspense data cache layer. But there’s a limit to how fast you can be when fetching hundreds of DOM element previews for each layer of the tree.
With V3, we asked the question, “could we collect all of the data we need for the entire tree in entire tree in one eval?” The answer was yes, it’s insanely fast, and the best part is that once it’s loaded, expanding an element is now instant!
Oh and by the way, fetching the entire DOM at once also means that navigating the element tree with your keyboard and selecting elements with the Node Picker is also great as well.
If you can’t tell by the tone of this post, we’re really excited about this one. It’s these fundamental improvements that make all of the difference.

The time traveller’s log

Image without caption
In this week’s edition of the time traveller’s log, we’re excited to bring you a deep dive into how Andarist uses Replay DevTools to debug the TypeScript Compiler.
If you’ve ever been curious about what’s going on under the hood as TS infers your types, this discussion is for you. Video

Additional Updates

WebSocket events are now shown in the Console Event Listeners
WebSocket messages events are now available in the Event Listeners panel which lets you view the payload and jump to where the event was handled.
Image without caption
Add WebSocket category to chromium events (#9983)
Firefox recordings are now redirected to legacy.replay.io
As part of our migration to Chromium, we’re now pinning Firefox recordings to a specific version of Replay DevTools so that we can focus on making chromium specific improvements to Replay DevTools like the new Elements and React panels.
You can now search for elements by either the XPath or text of the node
It’s now possible to search for elements by either their XPath or by the text in the node. This is one of the features that we’ve wanted to build for awhile, but couldn’t until the client had the full tree 🎉
Image without caption
Elements search
Updated Dec 1, 2023
Related posts
post image
We’re thrilled to share our progress on Performance Analysis: the first practical way to catch performance regressions before they ship to prod.
post image
We’re thrilled to share that we’ve officially migrated from Firefox to Chrome. It’s been a long time coming, but Chrome is better in every way.
post image
Today we’re excited to share an entirely new version of React DevTools which Brian Vaughn wrote from scratch.
Powered by Notaku