| 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
