dom-inspector

name	dom-inspector
description	Advanced DOM inspection and interaction capabilities. Allows analyzing page layout, extracting compact DOM snapshots, manipulating elements, and debugging browser logs.
allowed-tools	["get_page_snapshot","get_visual_hierarchy","get_element_details","click_element","input_text","get_console_logs","scroll_to_element","capture_screenshot"]

DOM Inspector Skill

Core Principle: Minimize token cost. Always choose the cheapest tool that gets the job done.

Tool Cost Reference

Cost	Tools	Use For
Low	get_visual_hierarchy, click_element, input_text, scroll_to_element	Layout overview, trigger interactions
Mid	get_page_snapshot, get_element_details, get_console_logs	DOM with @eID, element deep dive, logs
High	capture_screenshot	Visual comparison with design mockups only

Workflows

1. Fix UI Against Design Mockup

capture_screenshot → compare with design → edit styles → capture_screenshot → verify

Screenshot is justified here — pixel-level visual comparison requires images.

2. Verify Interaction Flows

get_page_snapshot → find @eID → click_element/input_text → get_page_snapshot → verify DOM changes

Example: snapshot → @e42 [button] "Settings" → click_element(e42) → snapshot → confirm dialog appeared

3. Debug Bugs via Logs

get_console_logs(level="error") → add console.info("[BUG]",...) to code
→ click_element to reproduce → get_console_logs(keyword="[BUG]")
→ fix code → re-trigger → get_console_logs → confirm fix

Important: console.log is NOT captured. Use console.info or higher (warn/error) for debugging. Use prefixes ([BUG], [PERF]) + keyword/level filter to avoid log noise.

4. Explore Page Structure

get_visual_hierarchy → understand layout (cheap)
→ get_page_snapshot(startNodeId="eX") → targeted DOM of area of interest
→ get_element_details("eY") → deep dive if needed

Always start with get_visual_hierarchy — cheapest way to understand the page.

5. Performance Debugging

Add console.time/PerformanceObserver → click_element to trigger
→ get_console_logs(keyword="[PERF]") → fix → re-trigger → verify

Decision Guide

• Understand layout? → get_visual_hierarchy first
• Need element IDs? → get_page_snapshot (use startNodeId to narrow scope)
• Click / type? → click_element / input_text with @eID
• Compare with design? → capture_screenshot
• Runtime data? → get_console_logs with keyword / level
• Element off-screen? → scroll_to_element before snapshot
• Computed styles / position? → get_element_details

Anti-Patterns

• ✗ capture_screenshot to discover structure (use get_visual_hierarchy)
• ✗ Full-page snapshot when only one section needed (use startNodeId)
• ✗ get_console_logs without keyword/level filter (token waste)
• ✗ Skipping get_visual_hierarchy and jumping straight to detailed snapshot