logo

Changelog 46: Chrome-palooza 🚀

We’re excited to share three big Chrome updates today: Chromium 108, Elements Panel, and React DevTools!
profile photo
Jason Laster
Image without caption
We’re excited to share three big Chrome updates today!
⚠️
Replay Chromium is still in beta for Linux-only (support for Mac and Windows coming soon) but if you want to try it out for yourself, check out these instructions
  1. Chromium 108
Over the past 18 months we had let Replay Chrome sit and age. When we got serious about Chrome in August, we knew it was time for a rebase. As of Monday, we’re now on M108 (latest).
We'll be rebasing regularly to track upstream chromium more closely. As a general rule of thumb, rebases typically are fairly easy because the changes are fairly minimal. The challenging part is finding and fixing the new forms of non-determinism.
  1. Elements Panel
Over the past two months, Dominik, our newest team member, has been hard at work adding Chromium support for Replay’s DOM + CSS APIs.
When you open a Chrome replay, you’ll now see the Elements Panel in the bottom right and will be able to inspect elements and view their styles and computed properties.
  1. React DevTools (experimental)
When we looked into React DevTools support in November, we knew we had a choice: go the safe route and do what we did before or bet on Replay’s Analysis APIs and shoot for a ~30% speed up in recording times.
React DevTools adds significant overhead, so we decided to go for it. If you’re curious about how it works, Mark wrote a great post here. Tl;dr, not only is React DevTools shipping, but we’ve figured out how to implement React’s performance panel and a whole suite of futuristic React debugging features.

Additional Updates

Video Downloads (experimental) It’s now possible to go to Share and download Replay videos which you can share in Slack and Linear.
Image without caption
Resizable Layout Replay’s DevTools are now powered by Brian’s new react-resizable-panels package. In addition to panel resizing being far smoother and intuitive, you can now collapse the left sidebar by dragging it to the toolbar.
Image without caption
Toggle Print Statements It’s now possible to go to the Pause > Print Statement panel and toggle whether a print statements logs are show in the console.
Image without caption
Copy Values You can now right click on an object property and copy its value to the clipboard. Wouldn’t be surprised if you see this in Chrome DevTools in six months or so 🙂
Image without caption
Related posts
post image
This week we’re excited to share Elements Panel V3, which brings one second element loads.
post image
Today we’re excited to share an entirely new version of React DevTools which Brian Vaughn wrote from scratch.
post image
Today we’re excited to share the new time travel aware Full Text Search. The next time you search, you’ll notice that we’ve dimmed out the results which were not executed.
Powered by Notaku