skills.rest
coreyone
coreyoneCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate Chrome browser testing, network inspection, and DOM capture via Chrome DevTools Protocol.

1|Updated Jun 29, 2026
Search Tags:#testing#browser automation#mcp#devtools#chrome#console logs#dom snapshot
One-click install
npx skills add https://github.com/coreyone/software-maestro --skill chrome-devtools-coreyone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/coreyone/software-maestro/tree/main/quality/chrome-devtools
Command: npx skills add https://github.com/coreyone/software-maestro --skill chrome-devtools-coreyone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Manually testing web pages, inspecting network traffic, and debugging console errors in Chrome is repetitive and hard to automate. This Skill lets an AI agent drive a real Chrome browser through the chrome-devtools-mcp server to perform these tasks programmatically. ## Core Features & Use Cases - Browser Automation: Navigate pages, click elements, and fill forms using element uids from accessibility-tree snapshots. - Inspection & Debugging: Capture console logs, network requests, screenshots, and DOM snapshots for analysis. - Use Case: Point the agent at your staging login page to verify the form renders correctly, confirm no JavaScript exceptions appear in the console, and capture a full-page screenshot for the QA report. ## Quick Start Ask the agent to open your staging URL in Chrome, take a snapshot of the page, and report any console errors it finds.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate Chrome browser testing with an AI agent?▼

Use the chrome-devtools-mcp server, which exposes tools like navigate_page, take_snapshot, click, and fill. The browser starts automatically on the first tool call using a persistent Chrome profile, and elements are targeted by uid from page snapshots.

How to inspect console logs and network requests in Chrome programmatically?▼

The chrome-devtools-mcp tools let you list console messages and capture network traffic after navigating to a page. Combine navigate_page with take_snapshot and console inspection to audit a page for JavaScript errors in one flow.

What is the difference between take_snapshot and take_screenshot?▼

take_snapshot returns a text-based accessibility tree with element uids, making it faster and better for automation. take_screenshot captures the visual state of the page and is best when a human needs to see the rendered result.

Why is an element not found when clicking in Chrome DevTools automation?▼

Element uids become stale when the page changes or elements are removed. Take a fresh snapshot with take_snapshot to get updated uids before interacting with the element again.

What should I do if chrome-devtools-mcp fails to launch?▼

Check the official troubleshooting guide at the chrome-devtools-mcp GitHub repository. For tasks the MCP server cannot handle, fall back to the Chrome DevTools UI documented at developer.chrome.com.

Related Skills

Explore More Software Engineering Skills→
jaypatrickjaypatrick

web-performance-audit

Audit web performance with Chrome DevTools MCP tools and analyze Core Web Vitals.

Community
Advanced
legioncodeinclegioncodeinc
84

browser-automation-stinger

Guides Playwright and Puppeteer automation for browser tests, debugging, and CI evidence capture.

Official
Intermediate
krzemienskikrzemienski
2

chrome-devtools

Diagnose performance, network, and DOM issues using Chrome DevTools MCP.

Community
Advanced
HouseGarofaloHouseGarofalo
3

puppeteer

Automates browser tasks with Puppeteer for web scraping, testing, screenshots, and PDFs.

Official
Advanced