# Debug

> Browser debugging with agent-browser CLI. Use when: - User mentions "screenshot", "visual bug", "inspect element" - User asks "what does it look like", "see the page" - Need to debug browser rendering, layout, or visual issues - User wants to test UI in browser - E2E debugging or visual verification

- Skill: `majiayu000/debug-34` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/debug-34`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/debug-34/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/debug-34

---


# Browser Debugging with agent-browser

AI-optimized browser automation for visual debugging.

## Commands

```bash
# Navigate to a URL
agent-browser navigate http://localhost:3000

# Take screenshot
agent-browser screenshot

# Get accessibility tree (AI-optimized DOM)
agent-browser snapshot

# Click element by accessibility ref
agent-browser click @e5

# Type text
agent-browser type @e3 "search query"

# Get page info
agent-browser info
```

## Workflow

1. **Navigate** to the target URL
2. **Screenshot** to see current state
3. **Snapshot** to get accessibility tree with element refs
4. **Interact** using element refs (@e1, @e2, etc.)
5. **Screenshot** again to verify changes

## Element References

The accessibility tree gives each element a unique ref:

```
@e1: button "Submit"
@e2: textbox "Email"
@e3: link "Home"
```

Use these refs for reliable element targeting.

## Common Debugging Tasks

### Visual Bug
```bash
agent-browser navigate http://localhost:3000/broken-page
agent-browser screenshot
# Analyze screenshot for visual issues
```

### Interactive Testing
```bash
agent-browser navigate http://localhost:3000/form
agent-browser snapshot
agent-browser type @e2 "test@example.com"
agent-browser click @e5
agent-browser screenshot
```

### Layout Inspection
```bash
agent-browser navigate http://localhost:3000
agent-browser snapshot
# Analyze accessibility tree for structure
```

## Prerequisites

Requires `agent-browser` CLI:
```bash
npm i -g agent-browser@0.8.3
```

## Output

Return findings:
- **Visual state**: What the page looks like
- **Issues found**: Layout problems, missing elements
- **Accessibility tree**: Key element structure
- **Recommendations**: How to fix issues