chrome-devtools

Debug, inspect, and automate web pages using Chrome DevTools and Puppeteer.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/The1Studio/ClaudeAssistant --skill chrome-devtools-the1studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/The1Studio/ClaudeAssistant/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/The1Studio/ClaudeAssistant --skill chrome-devtools-the1studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, yargs, and includes scripts (resource) and references (resource) components.

What problem does it solve? This Skill provides comprehensive guidance for debugging, inspecting, and automating web pages using Chrome DevTools, Puppeteer, and the Chrome DevTools Protocol (CDP). It helps developers and QA engineers analyze web performance, debug JavaScript, monitor network activity, and automate browser tasks efficiently.

Core Features & Use Cases:

  • Web Performance Analysis: Guides on using DevTools for performance profiling, identifying bottlenecks, and optimizing page load times.
  • Browser Automation with Puppeteer: Covers scripting browser interactions for web scraping, testing, and generating screenshots or PDFs.
  • Use Case: A web developer needs to diagnose a slow-loading page, identify the cause of a JavaScript error, and automate taking screenshots of different pages on their website. This skill provides the necessary tools and knowledge.

Quick Start: Analyze the performance of 'https://example.com' and generate a report of key metrics like FCP and LCP.