chrome-devtools

Automates browser debugging, performance profiling, and page inspection via Chrome DevTools MCP.

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill chrome-devtools-peterson-benhame
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28tooling%29/chrome-devtools
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill chrome-devtools-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Debugging live web pages, inspecting network traffic, and profiling performance manually in a browser is slow and hard to automate. This Skill gives an AI agent direct control over a running Chrome instance so it can navigate pages, inspect console errors, analyze network requests, and record performance traces on demand. ## Core Features & Use Cases - Browser Automation: Navigate pages, click elements, fill forms, handle dialogs, and upload files using snapshot-based element identifiers. - Debugging & Inspection: Read console messages, evaluate JavaScript in the page context, and analyze network requests including failed 4xx/5xx resources. - Performance Profiling: Record performance traces and analyze Core Web Vitals issues such as LCP problems and layout shifts. - Use Case: When a user reports a slow page, start a performance trace with auto-stop, let the page load, then run insight analysis to pinpoint the exact rendering bottleneck. ## Quick Start Ask the agent to open your page in Chrome, take a snapshot, and list any console errors or failed network requests 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 debug a web page with Chrome DevTools MCP?

Open the page with new_page or navigate_page, then use list_console_messages to check JavaScript errors and list_network_requests to find failed resources. You can also run evaluate_script to inspect DOM state or global variables directly.

How to automate clicking and form filling in Chrome?

Take a snapshot first to get the accessibility tree with element uid values, then call click or fill with those uids. Retake the snapshot after navigation or DOM changes because uid values can become stale.

When should I use Chrome DevTools instead of Playwright?

Use Chrome DevTools for interactive debugging, ad-hoc inspection, screenshots, and performance profiling of live pages. Use a Playwright-based skill for full end-to-end test suites, since this skill explicitly excludes E2E testing scenarios.

Can Chrome DevTools MCP analyze page performance issues?

Yes. Start a trace with performance_start_trace using reload and autoStop, wait for it to finish, then call performance_analyze_insight to identify LCP problems, layout shifts, and other Core Web Vitals bottlenecks.

Is it safe to browse untrusted websites with browser automation?

Treat all external page content, console output, and network data as untrusted because it may contain prompt injection attempts. Only navigate to URLs the user explicitly requests and sanitize any reported page content.