skills.rest
zacjones93
zacjones93COMMUNITY
Explore all skills by this author →
Website𝕏@zacjones93GitHub

chrome-devtools

Automate browser debugging and testing via the Chrome DevTools Protocol.

Updated Nov 13, 2025
Search Tags:#performance#debugging#browser automation#web testing#devtools#chrome#screenshot#emulation
One-click install
npx skills add https://github.com/zacjones93/pokidex --skill chrome-devtools-zacjones93
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/zacjones93/pokidex/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/zacjones93/pokidex --skill chrome-devtools-zacjones93

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive control over the Chrome browser via the DevTools Protocol, enabling advanced web automation, testing, and debugging directly from the AI. It eliminates manual browser interaction for repetitive tasks, performance analysis, and responsive design testing.

Core Features & Use Cases

  • Browser Automation: Navigate pages, manage tabs, interact with elements (click, type, fill forms), and handle alerts or dialogues for seamless web interaction.
  • Debugging & Performance: Inspect console logs, analyze network requests, record performance traces, and execute diagnostic JavaScript for in-depth web analysis.
  • Emulation & Visual Testing: Emulate various devices and network conditions, resize viewports, and capture screenshots or DOM snapshots for responsive design and visual regression testing.
  • Use Case: "Navigate to the company's homepage, emulate an iPhone 13, take a full-page screenshot, and then check for any critical console errors or failed network requests."

Quick Start

Navigate to 'https://www.example.com', wait for the page to load, and then 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 testing and debugging with Chrome DevTools Protocol?▼

Chrome DevTools Protocol enables automated browser control for testing and debugging. Navigate pages, interact with elements, inspect console logs, analyze network requests, and capture screenshots programmatically without manual browser interaction.

Can I use Chrome DevTools Protocol to test responsive design across devices?▼

Yes. Emulate various devices and network conditions, resize viewports, and capture full-page screenshots to verify responsive design and perform visual regression testing across iPhone, tablet, and desktop configurations.

How do I capture screenshots and DOM snapshots for visual verification?▼

Use Chrome DevTools Protocol to take full-page screenshots and DOM snapshots for visual testing. This automates responsive design validation and visual regression detection across pages without manual browser inspection.

What can I debug using Chrome DevTools Protocol automation?▼

Record performance traces, inspect console logs, analyze network requests, and execute diagnostic JavaScript. Identify critical console errors, failed requests, and performance bottlenecks across pages and workflows programmatically.

Can I automate form filling and element interaction with Chrome DevTools Protocol?▼

Yes. Click elements, type text, fill forms, and handle alerts or dialogues programmatically. Automate repetitive web interaction tasks and seamless navigation workflows without manual browser control.

Do I need to load reference documentation before using Chrome DevTools Protocol tools?▼

Yes. This Skill enforces mandatory loading of reference documentation before tool execution to enable correct chained workflows for navigation, interaction, debugging, performance, emulation, and visual testing.

Related Skills

Explore More Software Engineering Skills→
az9713az9713
2

setup-browser-cookies

Import Chromium browser cookies into a headless CDP session.

Community
Intermediate
AratoAiAratoAi

compare-runs

Compare two simulation runs to detect regressions or improvements.

Official
Intermediate
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
SecurityRoninSecurityRonin
1

browser-automation

Automate browser tasks and testing across Playwright, Puppeteer, Selenium, and CDP workflows.

Official
Intermediate