inspect_dom
Progressive DOM inspection that reveals parent-child relationships, centering issues, spacing gaps, and scrollable containers. Start here for layout debugging.
Instructions
š PRIMARY INSPECTION TOOL - START HERE FOR LAYOUT DEBUGGING: Progressive DOM inspection that shows parent-child relationships, centering issues, spacing gaps, and scrollable containers. Skips wrapper divs and shows only semantic elements (header, nav, main, form, button, elements with test IDs, ARIA roles, etc.).
WORKFLOW: Call without selector for page overview, then drill down by calling with child's selector.
DETECTS: Scrollable containers (shows "scrollable āļø 36px" when scrollHeight > clientHeight), parent-relative positioning, vertical/horizontal centering, sibling spacing gaps, layout patterns.
OUTPUT FORMAT:
[0] <button data-testid="menu">
@ (16,8) 40Ć40px ā Absolute viewport position (x,y) and size
from edges: ā16px ā1144px ā8px ā8px ā Distance from parent edges (ā8px = ā8px means vertically centered)
"Menu"
ā visible, ā” interactive
[1] <div data-testid="title">
@ (260,2) 131Ć28px
from edges: ā244px ā244px ā2px ā42px ā Equal left/right (244px) = horizontally centered, unequal top/bottom = NOT vertically centered
gap from [0]: ā16px ā Spacing between siblings
"Title"
ā visible, 2 childrenSYMBOLS: ā=visible, ā=hidden, ā”=interactive, āā=horizontal edges, āā=vertical edges, āļø=vertical scroll, āļø=horizontal scroll CENTERING: Equal left/right distances = horizontally centered, equal top/bottom = vertically centered SCROLL DETECTION: Automatically detects scrollable containers and shows overflow amount (e.g., "scrollable āļø 397px" means 397px of hidden content). No need to use evaluate() to compare scrollHeight/clientHeight.
RELATED TOOLS: For comparing TWO elements' alignment (not parent-child), use compare_element_alignment(). For box model (padding/margin), use measure_element().
ā ļø More efficient than get_html() or evaluate() for structural analysis. Use BEFORE visual tools (screenshot) or evaluate(). Supports testid shortcuts.
NOTE: Dropdowns, listboxes, dialogs, and popovers (especially in react-aria/headless UI/Radix) are commonly portaled to document.body ā when a combobox or menu is open, query at the root level (e.g. [role="listbox"], [role="dialog"]) rather than inside the trigger's subtree.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | No | CSS selector, text selector, or testid shorthand to inspect. Omit for page overview (defaults to body). Use 'testid:login-form', '#main', etc. | |
| includeHidden | No | Include hidden elements in results (default: false) | |
| maxChildren | No | Maximum number of children to show (default: 20) | |
| maxDepth | No | Maximum depth to drill through non-semantic wrapper elements when looking for semantic children (default: 5). Increase for extremely deeply nested components, decrease to 1 to see only immediate children without drilling. |