dom-first-debugging

What problem does it solve?

It resolves UI layout and visual discrepancies by forcing the debugging workflow to start from the rendered DOM and computed styles, so the next hypothesis is grounded in what the app actually produced.

Core Features & Use Cases

• DOM-first truth reading: Reads computed styles, bounding rect, and scroll metrics for the affected element before analyzing CSS.
• Rendered-structure inspection: Retrieves the outerHTML of the specific element to understand the live structure (including inline styles and data-v hashes).
• Visual dimensional confirmation: Uses a focused screenshot crop of the target element to validate what the user is seeing (sizes, spacing, and positioning).
• Layout symptom triggers: Designed for cases like “panel doesn’t fill,” “X looks different from Y,” spacing/padding issues, missing border-radius, incorrect widths/heights, overlap, or UI breakage after refactors.

Quick Start

When you report a layout issue, ask the AI to first run DOM and computed-style reads for the exact element you suspect (e.g., the side panel) and then explain what specific computed values or DOM structure differ from what you expect.