Can I use it for testing local development files?

Yes, however it is recommended to serve local files via a local server (like npx serve) rather than the file:// protocol to avoid CORS and ES module restrictions.

How does the skill handle large screenshots?

It features built-in auto-compression using the Sharp library, which automatically reduces the file size of screenshots larger than 5MB for faster processing.

Does this skill require a headed browser?

The skill automatically detects your OS; it runs in headed mode on macOS and Windows for easier debugging and defaults to headless mode on Linux or CI environments.

What is an ARIA snapshot?

An ARIA snapshot is a YAML-formatted accessibility tree that provides semantic roles and stable references for elements, making it easier to interact with pages where the HTML structure is unknown.

Can multiple scripts share the same browser state?

Yes, the skill uses a persistent WebSocket session, allowing subsequent script executions to connect to and control the same browser instance without losing state.

Chrome DevTools & Browser Automation

Name: Chrome DevTools & Browser Automation
Author: duc01226

byduc01226

•

Browser Automation

Automates browser interactions, performance analysis, and web debugging using Puppeteer scripts with persistent session support.

About

The Chrome DevTools Agent skill empowers Claude Code to perform comprehensive browser automation, ranging from simple web scraping and form filling to complex performance auditing and JavaScript debugging. By leveraging Puppeteer with persistent browser sessions and semantic element discovery via ARIA snapshots, it allows for reliable cross-platform testing, accessibility audits, and automated UI workflows while maintaining state across multiple execution steps. It is an essential tool for developers needing to bridge the gap between AI-driven code generation and live web environment verification.

Key Features

Semantic element discovery using ARIA snapshots and ref-based interactions
Advanced visual debugging with auto-compressed screenshots and element-specific captures
Persistent browser sessions via WebSocket endpoint reuse for stateful automation
Automated performance analysis and Core Web Vitals monitoring
Comprehensive console log and network traffic interception for root cause analysis
2 GitHub stars

Use Cases

Performance auditing and debugging of JavaScript execution and network latency
High-fidelity web scraping and data extraction from complex, dynamic websites
End-to-end automated testing and UI verification for web applications

About

Key Features

Semantic element discovery using ARIA snapshots and ref-based interactions
Advanced visual debugging with auto-compressed screenshots and element-specific captures
Persistent browser sessions via WebSocket endpoint reuse for stateful automation
Automated performance analysis and Core Web Vitals monitoring
Comprehensive console log and network traffic interception for root cause analysis
2 GitHub stars

Use Cases

Performance auditing and debugging of JavaScript execution and network latency
High-fidelity web scraping and data extraction from complex, dynamic websites
End-to-end automated testing and UI verification for web applications