skills.rest
rafaelcalleja
rafaelcallejaCOMMUNITY
Explore all skills by this author โ†’
GitHub

chrome-devtools

Automate browser navigation, interaction, and data capture with Puppeteer CLI.

2|1|Updated Oct 11, 2025
Search Tags:#browser automation#web scraping#frontend development#visual testing#puppeteer#Chrome DevTools#web debugging
One-click install
npx skills add https://github.com/rafaelcalleja/claude-market-place --skill chrome-devtools-rafaelcalleja
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/rafaelcalleja/claude-market-place/tree/main/plugins/claudekit-skills/skills/chrome-devtools
Command: npx skills add https://github.com/rafaelcalleja/claude-market-place --skill chrome-devtools-rafaelcalleja

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Debugging web applications, performing visual tests, and automating browser interactions can be complex and time-consuming without direct access to browser tools. This skill provides a powerful interface to Chrome DevTools, streamlining these tasks.

Core Features & Use Cases

  • Web Application Debugging: Inspect console, network, and DOM for efficient issue resolution.
  • Visual Testing: Capture screenshots and analyze visual elements for UI/UX consistency.
  • Browser Automation: Automate navigation, clicks, form filling, and script execution.
  • Puppeteer Integration: Leverages Puppeteer for headless browser control and advanced scripting capabilities.
  • Use Case: Debug a JavaScript error on a live website by navigating to the page, inspecting the console output, and taking a screenshot of the problematic UI element, all through natural language commands.

Quick Start

Use the chrome-devtools skill to navigate to 'https://example.com' and take a full-page screenshot.

Frequently Asked Questions about chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate browser tasks like navigation and screenshot capture?โ–ผ

Browser automation using Puppeteer CLI lets you navigate pages, interact with elements, and capture screenshots programmatically. This Skill drives Chrome DevTools through Puppeteer scripts that execute on Node.js 18+, handling navigation, clicks, form filling, and JavaScript evaluation with JSON output.

Can I use Puppeteer for web scraping and data extraction?โ–ผ

Puppeteer enables web scraping by automating browser interactions to navigate pages, extract DOM content, and evaluate JavaScript. This Skill wraps Puppeteer with security checks for selectors, supports CSS and XPath queries, and outputs captured data as JSON across Linux, macOS, and Windows.

What's the best way to perform visual testing and take screenshots of web pages?โ–ผ

Visual testing captures full-page and element screenshots through headless browser automation. This Skill uses Puppeteer to render pages and snapshot UI elements, optionally compressing images with ImageMagick, enabling UI/UX consistency checks without manual browser inspection.

How do I debug JavaScript errors and inspect network traffic in web applications?โ–ผ

Web debugging captures console output, network activity, and DOM state from live pages. This Skill leverages Chrome DevTools integration via Puppeteer to log errors, monitor requests, and inspect elements, returning results as JSON for programmatic analysis and troubleshooting.

Does this work for performance analysis and monitoring on different operating systems?โ–ผ

This Skill runs on Linux, WSL, macOS, and Windows with Node.js 18+ installed. It supports performance monitoring through network traffic inspection and script evaluation, making cross-platform browser automation and testing accessible without platform-specific rewrites.

What are the limitations when automating browser tasks with headless Chrome?โ–ผ

Headless browser automation has constraints: it requires Node.js 18+, Puppeteer dependency, and working-directory verification; lacks visual rendering context of headed browsers; and depends on CSS/XPath selector accuracy. This Skill enforces robust error handling and security checks to mitigate common failures.

Related Skills

Explore More Software Engineering Skillsโ†’
LuizEduPPLuizEduPP

chrome-devtools

Automate browser inspection, interaction, and performance testing via Puppeteer CLI scripts.

Community
Advanced
kienhaminhkienhaminh

chrome-devtools

Automate browser control and web-page analysis with Puppeteer CLI scripts.

Community
Advanced
jiunbaejiunbae
12

playwright

Automate browser tasks for screenshots, scraping, form automation, and E2E tests.

Community
Advanced
franroafranroa

chrome-devtools

Automate browser tasks with Puppeteer scripts and emit JSON output.

Community
Advanced