Language: 日本語English

chrome-devtools-mcp Plugin

Category
Development
Topics
Code Quality, Review & Testing · Monitoring & Observability · Web & App Development
First seen
2026-07-09
Last confirmed
2026-07-13
Explanation last updated
2026-07-12

The explanation below is AI-generated. Please verify it against the sources.

chrome-devtools-mcp is an MCP (Model-Context-Protocol) server that lets a coding agent such as Claude, Cursor, Copilot, or Gemini CLI control and inspect a live Chrome browser, according to the project's README. It exposes Chrome DevTools capabilities for recording performance traces, analyzing network requests, reading console messages with source-mapped stack traces, and automating browser actions via Puppeteer. A CLI is also provided for use without an MCP client. The tool officially supports Google Chrome and Chrome for Testing, and it warns that it exposes browser content to MCP clients, so sensitive data should not be shared. Usage statistics are collected by Google by default but can be disabled with a flag.

Overview

According to the README, chrome-devtools-mcp is an open-source (Apache-2.0) MCP server, published as the npm package chrome-devtools-mcp, that bridges AI coding agents with a live Chrome browser instance. It is installed and run via npx and configured inside an MCP client's server settings (e.g., Claude Code, Cursor, VS Code/Copilot, Gemini CLI, Windsurf, and others listed in the README).

What you can do with chrome-devtools-mcp

  • Automate browser input actions (click, drag, fill, fill_form, hover, press_key, type_text, upload_file, click_at, handle_dialog) using Puppeteer-based automation, per the README's tool list
  • Control navigation and pages (navigate_page, new_page, close_page, list_pages, select_page, wait_for)
  • Emulate device conditions and resize the viewport (emulate, resize_page)
  • Record and analyze performance traces (performance_start_trace, performance_stop_trace, performance_analyze_insight), with optional CrUX field-data enrichment
  • Inspect network requests (list_network_requests, get_network_request) and console messages with source-mapped stack traces (list_console_messages, get_console_message)
  • Debug pages via evaluate_script, take_screenshot, take_snapshot, screencast_start/stop, and run lighthouse_audit
  • Analyze memory with heap snapshot tools (take_heapsnapshot, compare_heapsnapshots, get_heapsnapshot_* tools)
  • Manage browser extensions (install_extension, list_extensions, reload_extension, trigger_extension_action, uninstall_extension)
  • Connect to a running Chrome instance via --browserUrl, --wsEndpoint, or --autoConnect instead of launching a new one
  • Run in a reduced '--slim' mode with only navigation, script execution, and screenshot tools for basic tasks

Sources

Original description (English)

Control and inspect a live Chrome browser from your coding agent. Record performance traces, analyze network requests, check console messages with source-mapped stack traces, and automate browser actions with Puppeteer.

History of chrome-devtools-mcp

Back to list