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