Replay’s DevTools has six primary panels for inspecting the replay:

🧱 Elements Inspect ui element styles and attributes

🖨️ Console Inspect logs, exceptions, errors, and events

📡 Network Inspect network activity, requests, and response bodies

⚛️ React Inspect react components, their state and props

🔍 Search Search files, functions, and text

⏸️ Pause Inspect the call stack and scope

<aside> 💡 Want to know how to best use these features for debugging? Check out Debugging.

</aside>

<aside> 👉 You can also view Events from the Replay Info panel in DevTools or Viewer mode.

</aside>

Layouts

DevTools has three layouts:

• Dock to Bottom Right: Sources panel on the left and secondary panels on the right. (default)
• Dock to the Left: Panels are on the left of the video. For when additional vertical space is needed.
• Dock to the Bottom: Panels are below the video. For when additional horizontal space is needed.

Select a layout using the icon on the upper-right of the Console. You can also toggle the video visibility in DevTools mode by clicking the video icon.