Summary
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 |