chrome-devtools-mcp

Official
Local
23.4k
Signed
GitHub Repo

Overview

The chrome-devtools-mcp server is a Model Context Protocol (MCP) server that lets AI assistants interact directly with Chrome DevTools via the Chrome DevTools Protocol (CDP). It enables AI-driven workflows to inspect pages, observe network activity, debug JavaScript, analyze performance, and audit rendering behavior — all from within an MCP-compatible assistant, without manually opening DevTools.

This server is ideal for frontend debugging, performance analysis, web automation diagnostics, and assisted web development.

Transport

stdio

Tools

  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • upload_file
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
  • emulate
  • resize_page
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
  • get_network_request
  • list_network_requests
  • evaluate_script
  • get_console_message
  • list_console_messages
  • take_screenshot
  • take_snapshot

Key Capabilities

  • Programmatic DevTools access — Control and inspect Chrome using the same protocol as DevTools.
  • Live page introspection — Analyze DOM structure, styles, scripts, and runtime state.
  • Network and API debugging — Observe requests, responses, headers, and failures.
  • JavaScript execution and diagnostics — Run scripts, capture console output, and detect runtime errors.
  • Performance analysis — Retrieve metrics related to load time, rendering, and execution.

How It Works

The chrome-devtools-mcp server runs as a local MCP service that connects to a Chrome or Chromium instance via the Chrome DevTools Protocol (CDP). Chrome can be launched with remote debugging enabled, or the server can attach to an existing debugging session.

When an AI agent invokes a tool the server translates the MCP request into the appropriate CDP command, executes it in the browser context, and returns structured results over the MCP protocol. This allows AI assistants to reason about page behavior, diagnose issues, and suggest fixes based on real runtime data.

By exposing DevTools functionality as MCP tools, the server enables workflows like “why is this page slow?”, “which request is failing?”, or “what JavaScript error is blocking rendering?” to be answered conversationally and programmatically — without leaving the AI environment.