How do I find selectors for elements?

Use the snapshot.js script included in the skill to extract a list of interactive elements, their text content, and recommended CSS or XPath selectors.

What is the Chrome DevTools Agent Skill?

It is a specialized capability for Claude Code that allows it to control a headless browser via Puppeteer to perform tasks like testing, scraping, and debugging.

Does it support screenshot compression?

Yes, it automatically uses ImageMagick to compress screenshots larger than 5MB to ensure they are compatible with AI model upload limits.

Is it compatible with Linux and WSL?

Yes, it includes an install-deps.sh script to set up necessary system libraries for Chrome on Ubuntu, Debian, Fedora, and other Linux distributions.

Can I run multi-step actions in one session?

Yes, scripts support a --close false flag, allowing you to chain commands like navigating, filling a form, and clicking a button in the same browser instance.

Chrome DevTools Automation

Name: Chrome DevTools Automation
Author: piotroq

bypiotroq

0•

Browser Automation

Automates web browsers using Puppeteer scripts for testing, scraping, and performance analysis within Claude Code.

The Chrome DevTools Agent Skill empowers Claude to interact with web pages directly through executable Puppeteer scripts. It provides a robust suite of tools for capturing screenshots with automatic compression, extracting interactive element metadata, monitoring network traffic, and measuring Core Web Vitals. Designed for developers needing reliable browser automation, it handles complex tasks like form submission and JavaScript execution while providing structured JSON output for seamless integration into development workflows.

Key Features

010 GitHub stars

02Comprehensive performance analysis including Core Web Vitals and execution traces

03Real-time console monitoring and network traffic tracking for advanced debugging

04Full-page and element-specific screenshot capture with automatic ImageMagick compression

05Browser session chaining to perform multi-step automation workflows without restarts

06Interactive element extraction and metadata discovery for precise selector targeting

Use Cases

01Automated end-to-end testing and UI verification of web applications

02Web scraping and data extraction from JavaScript-heavy dynamic websites

03Performance auditing and Core Web Vitals monitoring for SEO and UX optimization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com chrome-devtools

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Comprehensive performance analysis including Core Web Vitals and execution traces

03Real-time console monitoring and network traffic tracking for advanced debugging

04Full-page and element-specific screenshot capture with automatic ImageMagick compression

05Browser session chaining to perform multi-step automation workflows without restarts

06Interactive element extraction and metadata discovery for precise selector targeting

Use Cases

01Automated end-to-end testing and UI verification of web applications

02Web scraping and data extraction from JavaScript-heavy dynamic websites

03Performance auditing and Core Web Vitals monitoring for SEO and UX optimization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com chrome-devtools

For use in Claude.ai and ChatGPT