We did a lot of exploration in Replay Tour 2.0 and shipped a good MVP, but it’s clear we need something more permanent in the UI. Tours are easy to skip over, whereas Replay Assist is designed to be a pane you can turn on to learn more about Replay features.



Status/next steps

We have a Draft PR here and a Figma page here. Right now Jon’s socialising the ideas with the team and building out the prototype. We’ll be iterating on the steps and adding animated gifs/descriptions to the prototype to see how it feels.

Exploring our list of items:

Jon Jason Mark Tour Reference?
Open DevTools
Time travel in console Jump to a Console message
Magic print statements Add a print statement
Add a condition Maybe?
Jump to a hit point via the in-panel timeline Maybe?
Add a comment
… to a line of code
… to a network request
… to a print statement
Reply to a comment
Jump to code Jump to a line of code
Use a unicorn badge Set a color
Record a replay
Search source text
Explore sources
Quick open a file
Launch Command Palette
Jump to an event
Inspect an element
Inspect a component
Use all four tabs: Console, Elements, (React?), Network
Share a replay publicly
Use focus mode (standard)
Use focus mode (from context menu)
Source viewer: Hover over a variable while paused
Source viewer:
• Expand an object preview
Elements: ◦ select a DOM node
Elements: ◦ interact with the CSS/layout subtabs
Elements: ◦ search for a DOM node by selector
Pause panel: use the stepping commands
Pause panel: jump to a stack frame
Pause panel: interact with the "Scopes" panel