skills.rest
Pgooone
PgoooneCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automates browser debugging and interaction through Chrome DevTools MCP tools.

1|Updated Apr 3, 2026
Search Tags:#debugging#browser automation#web testing#mcp#chrome devtools#performance analysis#network inspection
One-click install
npx skills add https://github.com/Pgooone/oh-pgone-claudecode --skill chrome-devtools-pgooone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/Pgooone/oh-pgone-claudecode/tree/main/.claude/plugins/cache/chrome-devtools-plugins/chrome-devtools-mcp/latest/skills/chrome-devtools
Command: npx skills add https://github.com/Pgooone/oh-pgone-claudecode --skill chrome-devtools-pgooone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Debugging web pages and automating browser interactions manually is slow and error-prone. This Skill connects AI workflows to Chrome DevTools via MCP, enabling programmatic page navigation, element interaction, performance analysis, and network inspection. ## Core Features & Use Cases - Browser Automation: Navigate pages, click elements, fill forms, and manage multiple pages using snapshot-based element uids. - Debugging & Inspection: Take snapshots and screenshots, evaluate scripts, and inspect network requests to diagnose page issues. - Performance Analysis: Capture traces and use pagination, filtering, and file output to handle large debugging datasets efficiently. - Use Case: A developer investigating a broken checkout flow can navigate to the page, snapshot the DOM, click through the form steps, and capture network requests to find the failing API call. ## Quick Start Use Chrome DevTools to open the login page, take a snapshot, and click the submit button.

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 interactions with Chrome DevTools MCP?▼

Navigate to the page with navigate_page or new_page, wait for content with wait_for, then take_snapshot to get element uids. Use those uids with click, fill, and other interaction tools to automate the page.

What is the difference between take_snapshot and take_screenshot?▼

take_snapshot returns a text-based accessibility tree with element uids, which is faster and better for automation. take_screenshot captures the visual state of the page, which is useful when the user needs to see what is rendered.

How do I interact with an element that is not found on the page?▼

Take a fresh snapshot because the element may have been removed or the page may have changed since the last snapshot. Element uids are only valid for the current page state.

Can Chrome DevTools MCP handle multiple pages at once?▼

Yes, use list_pages to see all available pages and select_page to switch the active context. Tools always operate on the currently selected page.

Why does chrome-devtools-mcp fail to launch Chrome?▼

Launch failures usually relate to Chrome installation or profile configuration issues. Refer to the troubleshooting guide at the chrome-devtools-mcp GitHub repository for platform-specific fixes.

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
ibalasiteibalasite

qa

Run automated and interactive QA sessions to test, fix, and re-verify web applications.

Community
Advanced
rust-worksrust-works
51

testing

Identify and address common testing anti-patterns across software projects.

Official
Intermediate
trungdo9trungdo9
3

chrome-devtools

Automate browser tasks and interactions using Puppeteer with JSON output.

Community
Advanced