提升开发效率，使用 Chrome DevTools MCP 打造智能编码助手！

chrome-devtools-mcp是为AI编码助手提供Chrome浏览器控制的MCP服务器工具，支持性能分析、调试和自动化操作。核心功能包括录制性能跟踪、网络请求分析和Puppeteer自动化。使用需注意数据安全，要求Node.js v20.19+和最新Chrome。配置简单，支持多种客户端环境，提供点击、拖拽、截屏等操作API，并能连接到现有Chrome实例进行调试。同类工具包括Puppet

weixin_44626085

674人浏览 · 2026-01-25 12:10:16

weixin_44626085 · 2026-01-25 12:10:16 发布

Chrome DevTools MCP：为您的编码助手开启浏览器新视界

在技术飞速发展的今天，编码助手如 Gemini、Claude、Cursor 或 Copilot 用于提升开发效率和精确度已经成为一种趋势。而 chrome-devtools-mcp 正是为这些编码助手提供强大支持的工具，它能让您的编码助手控制和检查一个实时的 Chrome 浏览器。其作为模型-上下文-协议（MCP）服务器，为 AI 编码助手带来了 Chrome DevTools 的全部能力，助您实现可靠的自动化、深入的调试和性能分析。

核心功能

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

安全提示

使用 chrome-devtools-mcp 时，请注意它会将浏览器实例的内容暴露给 MCP 客户端，允许它们检查、调试并修改浏览器或 DevTools 中的任何数据。因此，请避免分享您不希望与 MCP 客户端共享的敏感或个人信息。

环境要求

Node.js v20.19 或更新版本。
Chrome 当前稳定版本或更新版本。
npm 工具。

快速入门

要将 Chrome DevTools MCP 添加到您的 MCP 客户端，请在配置中添加以下内容：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

请注意，使用 chrome-devtools-mcp@latest 确保您的 MCP 客户端始终使用最新版本的 Chrome DevTools MCP 服务器。

MCP 客户端配置

不同的环境可能会有不同的配置方法，例如在 Antigravity、Claude Code、Copilot 等中均可以找到相应的配置方式。以下是一些常见的示例：

在 Antigravity 环境中，您可以使用以下方式：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

测试您的设置

在 MCP 客户端中输入以下命令来检查是否一切正常：

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

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

工具与功能介绍

chrome-devtools-mcp 提供了多种工具帮助用户进行自动化操作和调试。以下是一些重要功能的详细介绍：

输入自动化

点击 (click)：模拟用户的点击行为。
拖拽 (drag)：执行拖拽操作。
填充 (fill)：自动填入文本框数据。
上传文件 (upload_file)：将文件上传到网页。

导航自动化

关闭页面 (close_page)：关闭当前页面。
新建页面 (new_page)：打开新的浏览器标签页。
等待 (wait_for)：在进行操作之前设置等待时间。

调试工具

脚本评估 (evaluate_script)：执行 JavaScript 代码，并获取结果。
截屏 (take_screenshot)：对当前页面进行截屏，HTML 和图像格式。

性能分析

性能分析洞察 (performance_analyze_insight)：提供性能分析报告。
开始性能跟踪 (performance_start_trace)：启动性能跟踪。

MCP 服务配置选项

chrome-devtools-mcp 支持多种配置选项，如下所示：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--autoConnect",
        "--userDataDir=/tmp/chrome-profile"
      ]
    }
  }
}