Does this skill require a local Chrome installation?

Puppeteer typically downloads a compatible version of Chrome during the npm install process, though Linux and WSL users may need to run the provided install-deps.sh script for system libraries.

Can I use this for multi-step workflows like logging in?

Yes, by using the --close false flag, you can chain multiple scripts together to maintain a single browser session for complex navigation and form automation.

What happens if a CSS selector fails?

The skill includes a snapshot.js utility that allows Claude to discover correct selectors, and scripts support both CSS and XPath selectors for robust element targeting.

How does it handle large screenshots for AI processing?

The skill includes automatic ImageMagick integration to compress screenshots that exceed 5MB, ensuring they remain compatible with Gemini and Claude API limits.

Is the output human-readable or machine-readable?

All scripts are designed to output structured JSON to stdout, making it easy for both the AI and developers to parse results using tools like jq.

Chrome DevTools Automation

Name: Chrome DevTools Automation
Author: nordeim

bynordeim

浏览器自动化

Automates browser interactions, performance auditing, and web scraping using Puppeteer CLI scripts.

关于

The Chrome DevTools skill enables Claude to perform advanced browser automation and technical web analysis through a suite of specialized Puppeteer scripts. It allows for headless browser control, including element interaction, form filling, and DOM snapshotting, while providing deep insights into network traffic, console logs, and Core Web Vitals. Designed for reliability, it features automatic screenshot compression via ImageMagick and outputs structured JSON data, making it ideal for automated testing, data extraction, and performance debugging within an AI-driven workflow.

主要功能

Form automation and multi-step browser interaction chaining
Full-page and element-specific screenshot capture with automatic 5MB compression
0 GitHub stars
Real-time monitoring of JavaScript console messages and HTTP traffic
Interactive element discovery and metadata extraction via DOM snapshots
Comprehensive performance analysis including Core Web Vitals and network tracing

使用场景

Automating end-to-end testing and visual regression checks for web applications
Auditing site performance and debugging network-level bottlenecks
Extracting structured data from complex, JavaScript-heavy websites

关于

主要功能

Form automation and multi-step browser interaction chaining
Full-page and element-specific screenshot capture with automatic 5MB compression
0 GitHub stars
Real-time monitoring of JavaScript console messages and HTTP traffic
Interactive element discovery and metadata extraction via DOM snapshots
Comprehensive performance analysis including Core Web Vitals and network tracing

使用场景

Automating end-to-end testing and visual regression checks for web applications
Auditing site performance and debugging network-level bottlenecks
Extracting structured data from complex, JavaScript-heavy websites