القائمة
Agent-ergonomic browser automation with token-efficient accessibility tree snapshots and combined operations
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Aradotso/devtools-skills --skill chrome-devtools-axi-browser-automationيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | chrome-devtools-axi-browser-automation |
| description | Agent-ergonomic browser automation with token-efficient accessibility tree snapshots and combined operations |
| triggers | ["automate browser interactions","control Chrome headlessly","capture accessibility tree","take screenshot of webpage","fill form fields automatically","navigate and interact with pages","test web application behavior","run Lighthouse performance audit"] |
Skill by ara.so — Devtools Skills collection.
chrome-devtools-axi is an AXI-compliant CLI wrapper around chrome-devtools-mcp that provides token-efficient browser automation. It uses TOON-encoded output to reduce token usage by ~40% compared to raw JSON, combines operations (navigate + snapshot + suggestions in one command), and includes contextual next-step hints in every response.
Key features:
uid= refs for precise element targetingFor agents to install automatically:
npx -y chrome-devtools-axi
For manual installation:
npm install -g chrome-devtools-axi
Tell your agent:
Execute `npx -y chrome-devtools-axi` to get browser automation tools.
The CLI communicates with a persistent bridge server (localhost:9224 by default) that maintains an MCP session with Chrome via DevTools Protocol. The bridge auto-starts on first command and writes state to ~/.chrome-devtools-axi/.
# Navigate to a URL and capture accessibility tree
chrome-devtools-axi open https://example.com
# Capture current page state
chrome-devtools-axi snapshot
# Navigate back
chrome-devtools-axi back
# Scroll page
chrome-devtools-axi scroll down
chrome-devtools-axi scroll top
# Wait for time or content
chrome-devtools-axi wait 2000
chrome-devtools-axi wait "Welcome"
Elements in snapshots are marked with uid=g<generation>:<id> refs. Always use refs exactly as printed:
# Click an element
chrome-devtools-axi click @g1:1
# Fill a form field
chrome-devtools-axi fill @g2:5 "user@example.com"
# Fill multiple fields at once
chrome-devtools-axi fillform @g2:5=john @g2:6=doe @g2:7=john@example.com
# Type text at current focus
chrome-devtools-axi type "search query"
# Press keyboard key
chrome-devtools-axi press Enter
chrome-devtools-axi press Tab
# Hover over element
chrome-devtools-axi hover @g1:3
# Drag and drop
chrome-devtools-axi drag @g1:4 @g1:8
# Upload file
chrome-devtools-axi upload @g1:2 /path/to/file.pdf
# Handle browser dialogs
chrome-devtools-axi dialog accept
chrome-devtools-axi dialog dismiss
# Save screenshot to file
chrome-devtools-axi screenshot output.png
# Capture specific element
chrome-devtools-axi screenshot element.png --uid @g1:5
# Full-page screenshot
chrome-devtools-axi screenshot full.png --full-page
# Specify format
chrome-devtools-axi screenshot output.jpg --format jpeg
# Evaluate expression (auto-wrapped)
chrome-devtools-axi eval "document.title"
# Execute function
chrome-devtools-axi eval "() => document.querySelectorAll('a').length"
# Multi-statement logic
chrome-devtools-axi eval "() => {
const rows = [...document.querySelectorAll('tr')];
return rows.map(row => row.textContent.trim());
}"
# Execute script from stdin
cat << 'EOF' | chrome-devtools-axi run
open https://example.com
wait "Example Domain"
click @g1:1
snapshot
EOF
# List all tabs
chrome-devtools-axi pages
# Open new tab
chrome-devtools-axi newpage https://google.com
# Open in background
chrome-devtools-axi newpage https://github.com --background
# Switch tab
chrome-devtools-axi selectpage <id>
# Close tab
chrome-devtools-axi closepage <id>
# Resize viewport
chrome-devtools-axi resize 1920 1080
# Emulate mobile viewport
chrome-devtools-axi emulate --viewport "390x844x3,mobile"
# Set color scheme
chrome-devtools-axi emulate --color-scheme dark
# Network throttling
chrome-devtools-axi emulate --network "Slow 3G"
# CPU throttling (1-20)
chrome-devtools-axi emulate --cpu 4
# Set geolocation
chrome-devtools-axi emulate --geolocation "37.7749x-122.4194"
# Custom user agent
chrome-devtools-axi emulate --user-agent "CustomBot/1.0"
# Combine options
chrome-devtools-axi emulate --viewport "390x844x3,mobile" --color-scheme dark --network "Fast 3G"
# List all console messages
chrome-devtools-axi console
# Filter by type
chrome-devtools-axi console --type error
chrome-devtools-axi console --type warn
# Pagination
chrome-devtools-axi console --limit 10 --page 2
# Get specific message
chrome-devtools-axi console-get <id>
Available types: log, debug, info, error, warn, dir, dirxml, table, trace, clear, assert, all
# List network requests
chrome-devtools-axi network
# Filter by type
chrome-devtools-axi network --type xhr
chrome-devtools-axi network --type fetch
# Get specific request
chrome-devtools-axi network-get <id>
# Save response body
chrome-devtools-axi network-get <id> --response-file response.json
# Save request body
chrome-devtools-axi network-get <id> --request-file request.json
Available types: document, stylesheet, image, media, font, script, xhr, fetch, websocket, manifest, other, all
# Run Lighthouse audit
chrome-devtools-axi lighthouse
# Mobile device
chrome-devtools-axi lighthouse --device mobile
# Snapshot mode (current state)
chrome-devtools-axi lighthouse --mode snapshot
# Save reports to directory
chrome-devtools-axi lighthouse --output-dir ./reports
# Start trace
chrome-devtools-axi perf-start
# Start without reload
chrome-devtools-axi perf-start --no-reload
# Stop and save trace
chrome-devtools-axi perf-stop --file trace.json
# Analyze performance insight
chrome-devtools-axi perf-insight lcp "Largest Contentful Paint"
# Capture heap snapshot
chrome-devtools-axi heap memory.heapsnapshot
# Change bridge server port (default: 9224)
export CHROME_DEVTOOLS_AXI_PORT=9225
# Connect to existing Chrome instance (HTTP/HTTPS)
export CHROME_DEVTOOLS_AXI_BROWSER_URL=http://127.0.0.1:9222
# Connect via WebSocket directly
export CHROME_DEVTOOLS_AXI_BROWSER_URL=wss://cluster.example/launch
# WebSocket authentication headers (JSON)
export CHROME_DEVTOOLS_AXI_WS_HEADERS='{"Authorization":"Bearer token"}'
# Disable session hook auto-install
export CHROME_DEVTOOLS_AXI_DISABLE_HOOKS=1
State stored in ~/.chrome-devtools-axi/:
bridge.pid — Running bridge PID and portsnapshot-generation — Staleness detection counter# Navigate and fill login form
chrome-devtools-axi open https://app.example.com/login
chrome-devtools-axi fillform @g1:1=user@example.com @g1:2=password
chrome-devtools-axi click @g1:3
chrome-devtools-axi wait "Dashboard"
chrome-devtools-axi snapshot
# Extract form data with JavaScript
chrome-devtools-axi eval "() => {
const form = document.querySelector('form');
const data = new FormData(form);
return Object.fromEntries(data.entries());
}"
// In TypeScript/Node.js
import { execSync } from 'child_process';
function runCommand(cmd: string): string {
return execSync(`chrome-devtools-axi ${cmd}`, { encoding: 'utf-8' });
}
// Navigate and extract data
runCommand('open https://example.com');
const title = runCommand('eval "document.title"');
// Take screenshot
runCommand('screenshot page.png');
// Fill and submit form
runCommand('fill @g1:1 "search term"');
runCommand('press Enter');
runCommand('wait 2000');
// Extract results
const results = runCommand('eval "() => [...document.querySelectorAll(\'.result\')].map(el => el.textContent)"');
# Wait for element to appear, then interact
chrome-devtools-axi open https://spa.example.com
chrome-devtools-axi wait "Loading complete"
chrome-devtools-axi snapshot
chrome-devtools-axi click @g2:5
# Test mobile layout
chrome-devtools-axi emulate --viewport "390x844x3,mobile"
chrome-devtools-axi open https://example.com
chrome-devtools-axi screenshot mobile.png
# Test desktop layout
chrome-devtools-axi resize 1920 1080
chrome-devtools-axi snapshot
chrome-devtools-axi screenshot desktop.png
Refs use a generation prefix (g<N>:) that increments with each snapshot. If you capture a snapshot at generation 1, get ref @g1:5, then the page re-renders and moves to generation 2, attempting to use @g1:5 will fail with STALE_REF error.
Agent pattern:
STALE_REF error, re-snapshot and retry with new ref# First snapshot
chrome-devtools-axi snapshot
# Output shows: uid=g1:1 link "Click here"
# Page changes, generation bumps to g2
chrome-devtools-axi click @g1:1
# Error: STALE_REF
# Re-snapshot to get fresh refs
chrome-devtools-axi snapshot
# Output shows: uid=g2:3 link "Click here"
chrome-devtools-axi click @g2:3
# Success
# Manually stop and restart bridge
chrome-devtools-axi stop
chrome-devtools-axi start
# Use different port
export CHROME_DEVTOOLS_AXI_PORT=9999
chrome-devtools-axi open https://example.com
Always use refs exactly as printed in snapshot output. If you get STALE_REF, capture a new snapshot.
If uid is valid but element doesn't respond:
chrome-devtools-axi wait before interaction# Disable truncation for complete data
chrome-devtools-axi snapshot --full
chrome-devtools-axi console --full
# Check for errors in console
chrome-devtools-axi console --type error
# Test simple eval first
chrome-devtools-axi eval "2 + 2"
# Use arrow function for complex logic
chrome-devtools-axi eval "() => { console.log('debug'); return 42; }"
#!/bin/bash
# Start fresh session
chrome-devtools-axi stop
chrome-devtools-axi start
# Navigate to app
chrome-devtools-axi open https://app.example.com
# Login
chrome-devtools-axi fillform @g1:1=$USER_EMAIL @g1:2=$USER_PASSWORD
chrome-devtools-axi click @g1:3
chrome-devtools-axi wait "Dashboard"
# Take baseline screenshot
chrome-devtools-axi screenshot baseline.png
# Navigate to feature
chrome-devtools-axi click @g2:10
chrome-devtools-axi wait "Feature Page"
# Interact with feature
chrome-devtools-axi fill @g3:5 "test data"
chrome-devtools-axi click @g3:6
# Verify result
chrome-devtools-axi wait "Success"
chrome-devtools-axi snapshot --full > result.txt
# Capture performance
chrome-devtools-axi lighthouse --output-dir ./reports
# Cleanup
chrome-devtools-axi stop
open gives snapshot automatically, reducing round-trips--full sparingly — Default truncation saves tokens; only expand when neededfillform over multiple fill — Batch form operations when possiblewait <text> instead of arbitrary timeouts when possible