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

0•

浏览器自动化

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.

主要功能

01Form automation and multi-step browser interaction chaining

02Full-page and element-specific screenshot capture with automatic 5MB compression

030 GitHub stars

04Real-time monitoring of JavaScript console messages and HTTP traffic

05Interactive element discovery and metadata extraction via DOM snapshots

06Comprehensive performance analysis including Core Web Vitals and network tracing

使用场景

01Automating end-to-end testing and visual regression checks for web applications

02Auditing site performance and debugging network-level bottlenecks

03Extracting structured data from complex, JavaScript-heavy websites

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nordeim/prompt-engineering chrome-devtools

For use in Claude.ai and ChatGPT

Download Skill