Reference Guide
Dev Tools

DevTools

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
💡

Want to know how to best use these features for debugging? Check out Debugging.

Untitled

👉

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

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.

Untitled

Shortcuts

While in a replay, you can use keyboard shortcuts to quickly access certain features.

Cmd in the list below is for MacOS users. On Windows, replace with Ctrl.

CommandFunctionNote
Cmd+KOpen command palette
Cmd+PSearch for a fileToggles to DevTools mode
Cmd+OSearch for a functionToggles to DevTools mode
Cmd+Shift+FSearch full textToggles to DevTools mode
Cmd+GSearch within fileFile must be selected
Ctrl+GGo to line in fileFile must be selected
Cmd+BToggle left sidebar
Cmd+/Open shortcut menuOnly in DevTools mode
F8ResumeOnly in Breakpoints
F10Step OverOnly in Breakpoints
F11Step InOnly in Breakpoints
Shift+F11Step OutOnly in Breakpoints
Shift+TToggle Dark Mode
Shift+FToggle Viewer

Command Palette

Quickly navigate to DevTools Panels and perform actions like searching or opening modals. Access the Command Palette from the Sources panel or with the Cmd+K shortcut.

Untitled

Examples:

  • Open the Network Monitor

  • Show comments in the sidebar

  • Launch the Sources Search modal

👉

The Home button in the top left of the Sources panel navigates to the Command Palette.

CommentingElements