chrome-devtools

Automate browser navigation, debugging, and performance profiling through Chrome DevTools MCP.

1|1|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/ultraviollettnympho/transit-ticket --skill chrome-devtools-ultraviollettnympho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/ultraviollettnympho/transit-ticket/tree/main/.github/skills/chrome-devtools
Command: npx skills add https://github.com/ultraviollettnympho/transit-ticket --skill chrome-devtools-ultraviollettnympho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually testing web pages, reproducing UI bugs, and diagnosing slow page loads requires repetitive clicking and digging through DevTools panels. This Skill lets an AI agent drive a live Chrome browser directly, capturing snapshots, console logs, network traffic, and performance traces on demand. ## Core Features & Use Cases - Browser Automation: Navigate pages, click elements, fill forms, handle dialogs, and upload files using element UIDs from accessibility snapshots. - Debugging & Inspection: Read console messages, evaluate JavaScript in the page context, and inspect network requests to diagnose failing pages. - Performance Analysis: Record performance traces and analyze Core Web Vitals issues such as LCP delays and layout shifts. - Use Case: A developer reports that a checkout page is slow. The agent opens the page, starts a performance trace with reload, then runs insight analysis to identify the LCP bottleneck and failing network requests. ## Quick Start Open the staging site in Chrome, take a snapshot, click the login button, and report any console errors or failed network requests.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate clicking and form filling in Chrome with an AI agent?

Take a snapshot first to get the accessibility tree with element UIDs, then call click or fill with the target UID. Retake the snapshot after navigation or DOM changes because UIDs can become stale.

How to analyze page performance and Core Web Vitals in Chrome DevTools?

Start a performance trace with reload and autoStop enabled, wait for it to finish, then run performance_analyze_insight. The analysis surfaces LCP issues, layout shifts, and other bottlenecks from the recorded trace.

Should I use take_snapshot or take_screenshot to find page elements?

Use take_snapshot for element identification because it returns the accessibility tree with UIDs required by interaction tools. Reserve take_screenshot for visual verification only, since screenshots provide no interactable element references.

How do I debug a failing web page with console and network logs?

List console messages to find JavaScript errors, then list network requests to identify failed 4xx or 5xx resources. You can also evaluate JavaScript in the page context to inspect DOM state or global variables.

Can Chrome DevTools MCP emulate slow networks or mobile viewports?

Yes, the emulate tool throttles CPU and network conditions or sets geolocation, while resize_page changes viewport dimensions. This supports testing responsive layouts and performance under constrained conditions.