Debug

Browser Debugging with agent-browser

AI-optimized browser automation for visual debugging.

Commands

# 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

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

Interactive Testing

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

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

Prerequisites

Requires agent-browser CLI:

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