debug

Navigate, screenshot, and inspect web pages via the agent-browser CLI.

Updated Mar 12, 2026

Search Tags:#debug #ui testing #browser #screenshot #visual bug #inspect element

Ready to run

npx skills add https://github.com/sethihq/guide --skill debug-sethihq

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: debug
Source: https://github.com/sethihq/guide/tree/main/public/kit/skills/debug
Command: npx skills add https://github.com/sethihq/guide --skill debug-sethihq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps debug browser rendering, layout, and visual issues by providing tools to inspect and interact with web pages.

Core Features & Use Cases

Visual Debugging: Capture screenshots to identify visual bugs.
Element Inspection: Use snapshot to get an accessibility tree with element references for precise interaction.
Interactive Testing: Navigate, type, and click elements to test UI components.
Use Case: When a user reports a "visual bug" on a webpage, use this Skill to navigate to the page, take a screenshot, and inspect the element tree to pinpoint the issue.

Quick Start

Use the debug skill to take a screenshot of the current page.

Frequently Asked Questions about debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I debug visual bugs on a webpage using screenshots?▼

Debug visual bugs by navigating to the webpage and capturing a screenshot to inspect rendering and layout discrepancies. This allows you to visually verify the issue and pinpoint the exact element causing the problem.

How does accessibility tree snapshotting help with element inspection?▼

Accessibility tree snapshotting provides element references for precise interaction during browser debugging. It generates a structural tree of the page elements, allowing you to inspect and target specific UI components for testing.

Do I need a specific CLI to automate browser interaction for UI testing?▼

Yes, you need the agent-browser CLI to execute browser automation for UI testing. This CLI enables navigation, text input, and element interaction required to debug rendering and visual discrepancies.

What is the best way to inspect element layout issues during interactive testing?▼

The best way to inspect element layout issues is to use an accessibility tree snapshot to get element references. This allows you to interact with specific elements, type text, and click to test UI components directly.

Can I interact with web page elements by typing and clicking to test UI components?▼

Yes, you can interact with web page elements by typing and clicking to test UI components. The browser automation CLI supports text input and element interaction via references, allowing for interactive UI testing.

Why are my screenshots not showing the visual discrepancies I expect?▼

Screenshots may not show expected visual discrepancies if the page is not fully rendered or the wrong element is targeted. Use an accessibility tree snapshot to verify the correct element references before capturing the screenshot.