简介

chrome-devtools-mcp 是一个工具，允许编码代理控制和检查实时的 Chrome 浏览器。它作为一个 MCP 服务器运行，提供对 Chrome DevTools 的完全访问权限，以实现自动化、调试和性能分析。

简介

chrome-devtools-mcp 是一个工具，允许编码代理控制和检查实时的 Chrome 浏览器。它作为一个 MCP 服务器运行，提供对 Chrome DevTools 的完全访问权限，以实现自动化、调试和性能分析。

Chrome DevTools MCP

chrome-devtools-mcp 使您的编码代理（如 Gemini、Claude、Cursor 或 Copilot）能够控制和检查实时的 Chrome 浏览器。它充当 Model-Context-Protocol (MCP) 服务器，让您的 AI 编码助手能够访问 Chrome DevTools 的全部功能，以实现可靠的自动化、深入调试和性能分析。

主要特性

• 获取性能洞察：使用 Chrome DevTools 记录跟踪并提取可操作的性能洞察。
• 高级浏览器调试：分析网络请求、截屏并检查浏览器控制台。
• 可靠的自动化。使用 puppeteer 在 Chrome 中自动执行操作，并自动等待操作结果。

免责声明

chrome-devtools-mcp 将浏览器实例的内容暴露给 MCP 客户端，允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。避免共享您不想与 MCP 客户端共享的敏感或个人信息。

要求

• Node.js 22.12.0 或更新版本。
• Chrome 当前稳定版本或更新版本。
• npm。

开始使用

将以下配置添加到您的 MCP 客户端中：

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

      "args": ["chrome-devtools-mcp@latest"]

    }

  }

}

[!NOTE]
使用 chrome-devtools-mcp@latest 确保您的 MCP 客户端始终使用最新版本的 Chrome DevTools MCP 服务器。

MCP 客户端配置

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

您的第一个提示

在您的 MCP 客户端中输入以下提示，以检查一切是否正常工作：

Check the performance of https://developers.chrome.com

您的 MCP 客户端应打开浏览器并记录性能跟踪。

[!NOTE]
MCP 服务器将在 MCP 客户端使用需要运行浏览器实例的工具时自动启动浏览器。仅连接到 Chrome DevTools MCP 服务器本身不会自动启动浏览器。

工具

• 输入自动化（7 个工具）
  • click
  • drag- fill
  • fill_form
  • handle_dialog
  • hover
  • upload_file
• 导航自动化 (7 个工具)
  • close_page
  • list_pages
  • navigate_page
  • navigate_page_history
  • new_page
  • select_page
  • wait_for
• 模拟 (3 个工具)
  • emulate_cpu
  • emulate_network
  • resize_page
• 性能 (3 个工具)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• 网络 (2 个工具)
  • get_network_request
  • list_network_requests
• 调试 (4 个工具)
  • evaluate_script
  • list_console_messages
  • take_screenshot
  • take_snapshot

配置

Chrome DevTools MCP 服务器支持以下配置选项：

• --browserUrl, -u 使用端口转发连接到正在运行的 Chrome 实例。更多详情请参见：https://developer.chrome.com/docs/devtools/remote-debugging/local-server。

  • 类型: 字符串

• --headless 是否以无头（无 UI）模式运行。

  • 类型: 布尔值
  • 默认值: false

• --executablePath, -e 自定义 Chrome 可执行文件的路径。

  • 类型: 字符串

• --isolated 如果指定，则创建一个在浏览器关闭后自动清理的临时用户数据目录。

  • 类型: 布尔值
  • 默认值: false

• --channel 指定应使用的不同 Chrome 通道。默认是稳定版通道版本。

  • 类型: 字符串
  • 选项: stable, canary, beta, dev

通过 JSON 配置中的 args 属性传递这些选项。例如：

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

      "args": [

        "chrome-devtools-mcp@latest",

        "--channel=canary",

        "--headless=true",

        "--isolated=true"

      ]

    }

  }

}

您还可以运行 npx chrome-devtools-mcp@latest --help 来查看所有可用的配置选项。

概念

用户数据目录

chrome-devtools-mcp 使用以下用户数据目录启动 Chrome 的稳定版实例：

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

用户数据目录在多次运行之间不会被清除，并且在所有 chrome-devtools-mcp 实例之间共享。将 isolated 选项设置为 true 以使用一个临时用户数据目录，该目录将在浏览器关闭后自动清除。

已知限制

操作系统沙箱

某些 MCP 客户端允许使用 macOS Seatbelt 或 Linux 容器对 MCP 服务器进行沙箱化。如果启用了沙箱，chrome-devtools-mcp 将无法启动需要权限来创建自己沙箱的 Chrome。作为解决方法，您可以在您的 MCP 客户端中禁用 chrome-devtools-mcp 的沙箱，或者使用 --connect-url 连接到您手动在 MCP 客户端沙箱之外启动的 Chrome 实例。

工具列表

• list_console_messages: List all console messages for the currently selected page

• emulate_cpu: Emulates CPU throttling by slowing down the selected page's execution.

• emulate_network: Emulates network conditions such as throttling on the selected page.

• click: Clicks on the provided element

• drag: Drag an element onto another element

• fill: Type text into a input, text area or select an option from a element. fill_form: Fill out multiple form elements at once hover: Hover over the provided element upload_file: Upload a file through a provided element. get_network_request: Gets a network request by URL. You can get all requests by calling list_network_requests. list_network_requests: List all requests for the currently selected page close_page: Closes the page by its index. The last open page cannot be closed. handle_dialog: If a browser dialog was opened, use this command to handle it list_pages: Get a list of pages open in the browser. navigate_page: Navigates the currently selected page to a URL. navigate_page_history: Navigates the currently selected page. new_page: Creates a new page resize_page: Resizes the selected page's window so that the page has specified dimension select_page: Select a page as a context for future tool calls. performance_analyze_insight: Provides more detailed information on a specific Performance Insight that was highlighed in the results of a trace recording. performance_start_trace: Starts a performance trace recording on the selected page. performance_stop_trace: Stops the active performance trace recording on the selected page. take_screenshot: Take a screenshot of the page or element. evaluate_script: Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON so returned values have to JSON-serializable. take_snapshot: Take a text snapshot of the currently selected page. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. wait_for: Wait for the specified text to appear on the selected page. 服务配置 [{'mcpServers': {'chrome-devtools': {'args': ['chrome-devtools-mcp@latest'], 'command': 'npx'}}}, {'mcpServers': {'chrome-devtools': {'args': ['chrome-devtools-mcp@latest', '--channel=canary', '--headless=true', '--isolated=true'], 'command': 'npx'}}}] 来源 来源：github 链接：https://github.com/ChromeDevTools/chrome-devtools-mcp