Chrome DevTools MCP

Plugin Active

Reliable automation, in-depth debugging, and performance analysis in Chrome using Chrome DevTools and Puppeteer

6 Skills 0 MCPs

Purpose

To empower AI coding assistants with reliable control and deep inspection capabilities of a live Chrome browser for automation, debugging, and performance analysis.

Features

Automate browser actions with Puppeteer
Debug web pages using Chrome DevTools
Analyze network requests and performance traces
Manage Chrome extensions
Capture screenshots and page snapshots

Use Cases

Automating repetitive browser tasks for testing or data collection
Debugging complex frontend issues by inspecting network, console, and DOM
Analyzing and optimizing page load performance (LCP, TTFB)
Scripting browser interactions for AI-driven workflows

Non-Goals

Directly controlling non-Chromium browsers
Replacing manual browser inspection for all use cases
Providing tools for mobile browser debugging (unless explicitly noted)

Compliance

warning:Telemetry opt-inUsage statistics are enabled by default, and while opt-out is possible via a flag, the collected fields are not explicitly documented or published with a schema.

Installation

First, add the marketplace

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Contains 6 extensions

Skill (6)

A11y Debugging Skill

Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

Chrome Devtools Skill

Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).

Chrome Devtools Cli Skill

Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.

Debug Optimize Lcp Skill

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.

Memory Leak Debugging Skill

Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to analyze heapsnapshots or run memory leak detection tools like memlab.

Troubleshooting Skill

Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.

100