DOM View Page

Inspect the DOM structure and user interactions.

Overview

The DOM View Page enables you to closely inspect the Document Object Model (DOM) while replaying user sessions. This tool is useful for debugging, as it lets you analyze the structure and elements of your web page exactly as they appeared during the user's interaction.

Dom_View_1

Key Features

Session Replay

Replay user sessions to understand how users interacted with your web page.

  • Use playback controls to pause, rewind, or fast-forward the session as needed.

DOM Inspection

Pause and inspect the DOM while the session is replaying.

  • Pause and Inspect: Pause the replay and click on Inspect to analyze the DOM structure.
  • Element Information: Click on any element (e.g., div blocks, buttons, or images) to get detailed information such as CSS styles, attributes, and hierarchy in the DOM tree.
  • Interactive Analysis: Inspect specific elements to diagnose layout issues or debug problems users encountered.
Intro Image

Skip Inactivity

Use the Skip Inactivity feature to automatically skip over parts of the session where no user activity occurred.

  • This saves time by focusing only on moments where users interacted with the page, making the debugging process more efficient.

How to Use the DOM View Page

Replay the Session

Select a session from the list and start replaying it to observe user interactions.

Pause and Inspect

Pause the replay at any point and click on Inspect to examine the DOM. Hover over and select elements to see their details, including HTML structure, applied CSS, and attributes.

Skipping Inactivity

Toggle the Skip Inactivity option to move through the session more quickly, skipping idle moments where no user activity occurred.

Use Cases

Debugging Layout Issues

If a user encountered a problem with the layout or design, inspect the relevant DOM elements to understand what might be causing the issue.

Analyzing Element Behavior

Check how elements are styled and arranged in the DOM to debug unexpected behavior or interactions.

Optimizing Performance

Use the DOM information to identify and optimize elements that may be impacting page performance.