Changelog 62: Elements Panel V3 š
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
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.
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 š
