AgentSkillsCN

debug

通过 agent-browser CLI 进行浏览器调试。适用于以下场景： - 用户提及“截屏”、“视觉缺陷”、“检查元素”； - 用户询问“它看起来是什么样？”、“查看当前页面”； - 需要调试浏览器渲染、布局或视觉问题； - 用户希望在浏览器中测试 UI 界面； - 进行端到端调试或视觉验证。

SKILL.md
--- frontmatter
name: debug
description: |
  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
context: fork
allowed-tools: [Bash]

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:

code
@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