logo

Changelog 8: On-Demand Paints

profile photo
Jason Laster
Image without caption
Today we are announcing On Demand Paints, a technical breakthrough that has been a year in the making, but let's first set the stage. When most people think of bugs, they think of logical bugs, but visual bugs caused by mouse events, loading states, and over-eager rendering are just as hard to reproduce and debug.
Today, the only way to investigate a visual bug is to record a video, but videos only help you see the problem, not understand why it happened and how to fix it. Print statements which are great at showing how values change over time, do not show how UI elements change over time!
When we designed Replay, we knew we had an opportunity to make visual debugging far better. This is why console logs have a fast-forward button and our videos include every browser paint.
So, where do On Demand Paints fit in? Today, it is still possible to pause on a line of code that is in between two paints. With On Demand Paints, Replay will paint when you pause ensuring that the video is always in-sync with the code.
Just as exciting, On Demand Paints mean that we can begin exploring things that would otherwise have been impossible such as editing an element’s styles or component's props and seeing the changes applied immediately.
What would your ideal visual debugging environment look like?

Additional Updates

  • Elements Panel The elements panel is built on top of On Demand Paints, so this also a big deal for the elements panel.
  • Network Monitor We're working on showing network request and response bodies. Once we have a better idea how long it will take, we'll be able to set a launch date and finish up the front-end.
  • Full Text Search Last week's update to full-text search was huge for being able to quickly find a line of code to add a print statement to. This week we're making it even faster.

Case Study

Check out this loom of GitHub's Project Iteration Field Settings. It was a lot of fun to share the bug fix with the GitHub team (Tweet). All bug reports should have a replay!
post image
We’re excited to be shipping the React Events Timeline today! The next time you select a Click event in the Events Panel, you’ll seek to the component’s onClick handler!
post image
We’re excited to share three big Chrome updates today: Chromium 108, Elements Panel, and React DevTools!
post image
We’re excited to share that over the past six months we’ve increased our P50 Butter Score from a 30 to a 90. 43% of replays now start in 15 seconds and resolve requests in under 2 seconds.
Powered by Notaku