Agent skill

browser-devtools

Browser debugging and automation using Playwright. Use for web debugging, console monitoring, network analysis, screenshot capture, DOM inspection, and UI testing during development.

View SKILL.md on GitHub Repository
Stars 8
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/vukhanhtruong/claude-rock/tree/main/plugins/browser-devtools/skills

SKILL.md

Browser Devtools

Browser automation and debugging using Playwright for web development testing and analysis.

Decision tree

Here the decison tree when user want to inspect the console log, apply the same pattern for other prompt.

User task → Is URL provided?
    ├─ Yes → Detect if it reachable.
    │         ├─ Success → Implement Reconnaissance-then-action (RTA)
    |         |              1. Navigate to provided URL.
    |         |              2. Inspect console log
    |         |              3. Identify the errors
    |         |              4. Execute actions with discovered issues
    │         └─ Fails → End
    │
    └─ No → Is the development server already running?
              ├─ No → End
              │
              └─ Yes → Ask user if they want to test development server?
                        ├─ Yes →  Reconnaissance-then-action (RTA)
                        ├─ No → End

Quick Start

Install dependencies:

bash
cd plugins/browser-devtools/skills
./scripts/install.sh

Test installation:

bash
node dist/scripts/navigate.js --url https://example.com

Scripts

All scripts located in scripts/ (compiled to dist/scripts/):

Core Commands:

  • navigate.js - Navigate to URLs
  • screenshot.js - Capture screenshots (full page or elements)
  • snapshot.js - DOM inspection and element discovery
  • evaluate.js - Execute JavaScript in browser context
  • click.js - Element interaction
  • fill.js - Form input testing

Monitoring:

  • console.js - Console log monitoring and error tracking
  • network.js - Network request analysis and performance debugging
  • performance.js - Core Web Vitals and performance metrics

Best Practices

  • Compliance Decision tree: The decision tree must be followed strictly.
  • Wait for elements: Use appropriate wait strategies for dynamic content
  • Clean up sessions: Close sessions when done to free resources

Usage

Single Commands

bash
# Screenshot
node dist/scripts/screenshot.js --url https://example.com --output page.png

# Performance analysis
node dist/scripts/performance.js --url https://example.com | jq '.vitals.LCP'

# Console monitoring (10 seconds)
node dist/scripts/console.js --url https://example.com --types error,warn --duration 10000

Chained Commands (reuse session)

bash
# Start session (keep browser open)
node dist/scripts/navigate.js --url https://example.com/login --close false

# Continue with same browser
node dist/scripts/fill.js --selector "#email" --value "user@example.com" --close false
node dist/scripts/click.js --selector "button[type=submit]"

Common Debugging Patterns

bash
# Find elements
node dist/scripts/snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'

# Check for errors
node dist/scripts/console.js --url https://example.com --types error

# Monitor API calls
node dist/scripts/network.js --url https://example.com --types xhr,fetch --duration 5000

# Test forms
node dist/scripts/fill.js --url https://example.com --selector "#search" --value "query" --close false
node dist/scripts/click.js --selector "button[type=submit]"

Options

All scripts support:

  • --headless false - Show browser window (default: true)
  • --close false - Keep browser open for chaining (default: true)
  • --timeout 30000 - Timeout in milliseconds
  • --browser chromium|firefox|webkit - Browser engine (default: chromium)

Output Format

Success:

json
{
  "success": true,
  "url": "https://example.com",
  "title": "Example Domain",
  "sessionId": "session_1234567890_abc123",
  "timestamp": "2024-01-01T12:00:00.000Z",
  "...": "script-specific data"
}

Error:

json
{
  "success": false,
  "error": "Element not found: .missing-element",
  "stack": "Error: Element not found..."
}

Selectors

bash
# CSS selectors
node dist/scripts/click.js --selector "#main .button.primary"

# XPath
node dist/scripts/click.js --selector "xpath=//button[contains(text(), 'Submit')]"

# Text selectors
node dist/scripts/click.js --selector "text=Click me"

Troubleshooting

Browser not installed: Run npm run install-browsers Element not found: Use snapshot.js first to find correct selectors Script timeout: Increase with --timeout 60000 Permission denied: Run chmod +x scripts/install.sh

Debug mode: Use --headless false to see browser actions Stale sessions: Start new session with --close true

Integration

Pre-commit testing:

bash
node dist/scripts/navigate.js --url http://localhost:3000 && \
node dist/scripts/performance.js --url http://localhost:3000 | jq '.vitals.LCP'

Performance regression:

bash
node dist/scripts/performance.js --url $APP_URL | jq '.vitals.LCP' | \
  awk '{print $1 < 2500 ? "PASS" : "FAIL"}'

References

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

vukhanhtruong/claude-rock

helm-scaffold

Generate production-ready Helm charts for Kubernetes applications. Use when users need to create new Helm charts, convert Kubernetes manifests to Helm templates, scaffold charts for Deployments/StatefulSets/Jobs/CronJobs, create multi-environment configurations, or standardize organizational chart templates with CNCF/Helm best practices. Uses Python scaffolding script and template assets for automated generation.

8 0
Explore
vukhanhtruong/claude-rock

architecture-design

Generate comprehensive software architecture documentation (ARCHITECTURE.md) with C4 diagrams, OpenAPI specs, and technology-specific guidance. This skill should be used when creating architecture documentation for new projects, documenting existing systems, or updating architectural specifications.

8 0
Explore
mattpocock/skills

scaffold-exercises

Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.

111,310 9,758
Explore
mattpocock/skills

setup-pre-commit

Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.

111,310 9,758
Explore
mattpocock/skills

obsidian-vault

Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.

111,310 9,758
Explore
mattpocock/skills

handoff

Compact the current conversation into a handoff document for another agent to pick up.

111,310 9,758
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results