2025-9-28 chrome-devtools-mcp

我们今天推出了新的 Chrome 开发者工具模型上下文协议 (MCP) 服务器的公开预览版，将 Chrome 开发者工具的强大功能带给 AI 编码助理。

编码代理面临一个根本性问题：它们无法看到自己生成的代码在浏览器中运行时实际执行的操作。他们实际上是在蒙着眼睛编程。

Chrome 开发者工具 MCP 服务器改变了这种情况。AI 编码助理可以直接在 Chrome 中调试网页，并受益于开发者工具的调试功能和性能洞见。这有助于他们更准确地识别和修复问题。

亲自体验其运作方式：

什么是 Model Context Protocol (MCP)？ #

Model Context Protocol (MCP) 是一种开放源代码标准，用于将大语言模型 (LLM) 连接到外部工具和数据源。Chrome 开发者工具 MCP 服务器可为 AI 代理添加调试功能。

例如，Chrome DevTools MCP 服务器提供了一种名为 performance_start_trace 的工具。当需要调查网站的性能时，LLM 可以使用此工具启动 Chrome、打开您的网站，并使用 Chrome 开发者工具记录性能轨迹。然后，LLM 可以分析性能轨迹，以提出潜在的改进建议。借助 MCP 协议，Chrome 开发者工具 MCP 服务器可以为您的编码代理带来新的调试功能，使其能够更好地构建网站。

如果您想详细了解 MCP 的运作方式，请参阅 MCP 文档。

您可以使用它做什么？ #

以下是一些示例提示，您可以在自己选择的 AI 助理（例如 Gemini CLI）中试用。

实时验证代码变更 #

使用 AI 代理生成修复，然后使用 Chrome 开发者工具 MCP 自动验证解决方案是否按预期运行。

建议尝试的提示：

Verify in the browser that your change works as expected.

诊断网络和控制台错误 #

让您的代理能够分析网络请求以发现 CORS 问题，或检查控制台日志以了解某项功能未按预期运行的原因。

建议尝试的提示：

A few images on localhost:8080 are not loading. What's happening?

模拟用户行为 #

导航、填写表单和点击按钮，以重现 bug 并测试复杂的用户流程，同时检查运行时环境。

建议尝试的提示：

Why does submitting the form fail after entering an email address?

调试实时样式和布局问题 #

让 AI 代理连接到实时网页，检查 DOM 和 CSS，并根据浏览器中的实时数据获取具体建议，以解决复杂的布局问题，例如元素溢出。

建议尝试的提示：

The page on localhost:8080 looks strange and off. Check what's happening there.

自动执行性能审核 #

指示 AI 代理运行性能轨迹，分析结果，并调查特定的性能问题，例如 LCP 数值过高。

建议尝试的提示：

Localhost:8080 is loading slowly. Make it load faster.

如需查看所有可用工具的列表，请参阅我们的工具参考文档。

开始使用 #

如需试用此功能，请将以下配置条目添加到您的 MCP 客户端：

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

如需检查其是否正常运行，请在编码代理中运行以下提示：

Please check the LCP of web.dev.

如需了解详情，请查看 GitHub 上的 Chrome 开发者工具 MCP 文档。

参与其中 #

我们正在逐步构建 Chrome 开发者工具 MCP，首先推出的是我们今天发布的公开预览版。我们正在积极征求您和社区的反馈，以便确定接下来应添加哪些功能。无论您是使用 AI 编码助理的开发者，还是构建下一代 AI 开发工具的供应商，您的真知灼见都将非常宝贵。如果发现任何缺失或无法正常运行的内容，请在 GitHub 上提交问题。

📄 文章摘要 Chrome DevTools MCP 与 Playwright MCP 的推出标志着前端开发自动化进入新阶段，AI 助手能够更深层次地控制和调试浏览器，为开发者带来前所未有的自动化体验。

🔗 在 jimmysong.io 上 阅读原文 体验更佳。

近年来，AI 与编程助手的融合不断加速，能够直接在浏览器内部进行深度调试与性能分析的能力，正在推动前端自动化进入新阶段。本文将介绍 Google 最近发布的 Chrome DevTools MCP，并深入讲解其设计理念、核心组件、典型用例以及本地试用与参与贡献的方法。

什么是 Chrome DevTools MCP？ #

Chrome DevTools MCP 并非简单地暴露 DevTools 功能，而是将调试能力、性能跟踪、网络监控等工具封装为面向 LLM/代理的 MCP 服务。与传统 Puppeteer 或 Playwright 的“脚本式控制”相比，Chrome DevTools MCP 具有以下优势：

• 更丰富的内部数据：可直接访问 performance trace、堆栈、网络事件等底层数据。

• 原生 DevTools 功能：涵盖 Lighthouse 风格的性能审查、CPU/内存采样、布局与渲染分析等。

在 VS Code 中配置好 Chrome DevTools MCP 后，你可以直接在 Copilot 中运行如下提示：

#chrome-devtools 检查 jimmysong.io 的 LCP 问题。

此时，Chrome 浏览器会自动启动并打开 jimmysong.io 网站，MCP 服务会执行页面加载的 tracing，收集 traceEvents 并分析主线程任务，最终返回包含 LCP 诊断和优化建议的报告。

项目概览 #

下面简要介绍 Chrome DevTools MCP 的技术栈和主要工具集，帮助读者快速了解其整体架构。

• 语言/运行时：Node.js（以 puppeteer/chrome-remote-interface 为后端），可按需启动 headless 或带界面的 Chrome 实例。

• 工具集：包含页面操作、性能记录、网络监控、控制台事件、堆快照、屏幕截图等多种工具（文档提到 18+ 工具）。

• 使用场景：性能优化自动化、自动化回归调试、AI 驱动的浏览器操作与审计。

核心架构与组件 #

Chrome DevTools MCP 采用分层架构设计，确保代理能够高效利用底层调试能力。下文将详细介绍各层组件及其职责，并通过架构图展示数据流转过程。

• MCP Server 层：负责接收来自 LLM/代理的 MCP 请求，进行会话管理与权限控制。

• 工具适配层：将 MCP 的高层请求映射到 Chrome DevTools Protocol（CDP）或 Puppeteer API，并管理长任务（如 recording/tracing）。

• Chrome 运行时：真实的 Chrome/Chromium 实例（headful 或 headless），执行所有底层操作并产生 trace、performance、console 等数据。

• 数据采集与传输：将采集到的 trace、堆栈、HAR、快照等数据序列化，通过 MCP 返回给调用方。

这种分层设计保证了灵活性：上层代理无需了解 CDP 细节即可利用强大的调试数据，实现者则可在工具适配层持续扩展新能力。

下方为 Chrome DevTools MCP 的架构图，便于理解系统内部数据流：

Chrome DevTools MCP 架构图

Chrome DevTools MCP 架构图

上图展示了从代理发起请求、MCP 服务分发到具体工具、工具通过适配器调用 Puppeteer/CDP 与 Chrome 交互、再将采集到的数据封装回传的全流程。

实际仓库实现还包含细粒度的工具目录（约 26 个工具，6 个类别），以及 WebSocket / stdio 的连接示例与配置项。建议阅读仓库 README.md 与 examples/ 获取最新命令与运行选项。

主要实现要点：

• CLI 与 MCP Server：项目以 Node.js CLI 启动，index.js 使用 yargs 处理命令行参数，并通过 @modelcontextprotocol/sdk 初始化 MCP 服务。服务可通过 stdio、WebSocket 或 HTTP 与外部代理通信。

• 工具系统：采用 defineTool() 工厂模式定义工具（ToolDefinition），并按功能分组为若干类别（输入自动化、页面导航、性能、调试、网络、仿真等）。每个工具负责参数校验、执行逻辑与统一的错误/响应格式。

• 浏览器管理（McpContext）：集中管理 Chrome 实例生命周期（启动、关闭、profile、可执行路径、headless/headful、隔离上下文），并维护页面状态以便多个工具共享同一浏览器上下文。

• 事件处理与同步：工具之间常需等待浏览器状态（如导航完成、元素出现、trace 结束）。项目实现了统一的事件处理与同步策略，保证长任务与短操作之间的协调。

• 响应格式化（McpResponse）：统一封装返回数据，包括状态、浏览器快照、截图、trace metadata、HAR 或性能洞察，方便代理消费并生成后续动作或建议。

工具生态系统 #

Chrome DevTools MCP 共提供 26 个工具，分为六大功能类别。下表对各类别及主要功能进行说明：

类别数量主要功能
输入自动化7click、drag、fill、fill_form、handle_dialog、hover、upload_file
导航自动化7close_page、list_pages、navigate_page、navigate_page_history、new_page、select_page、wait_for
性能3performance_analyze_insight、performance_start_trace、performance_stop_trace
调试4evaluate_script、list_console_messages、take_screenshot、take_snapshot
网络2get_network_request、list_network_requests
仿真3emulate_cpu、emulate_network、resize_page

每个工具都提供了特定的浏览器自动化能力，并保持一致的接口和错误处理模式。

典型用例与示例 #

Chrome DevTools MCP 在实际应用中展现出显著价值，主要体现在以下方面：

• 自动化启动页面加载 tracing，收集 trace 数据，分析主线程任务与网络请求，输出可执行建议（如减少阻塞脚本、延迟加载第三方资源）。

• 利用 traceEvents 获得精确的时间片段和调用栈，便于自动化工具生成修复建议。

• Agent 能触发一系列 DOM 操作，记录 console/warnings/errors，生成堆快照与 DOM 快照，并附带回放脚本与 screenshot，帮助开发者快速定位和复现问题。

• 支持拦截并记录所有网络请求（含 headers、timings、size），分析阻塞、超时或异常响应，标注可疑第三方脚本，实现自动化网络安全审计。

如何配置和使用？ #

下面介绍将 Chrome DevTools MCP 注册为 MCP 客户端服务器的步骤，并给出常见运行参数与实践建议。

添加 Chrome DevTools MCP 到 MCP 客户端 #

在 MCP 客户端（或代理）配置中，添加 mcpServers 条目指向 chrome-devtools-mcp。官方推荐配置如下：

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

该配置会在代理需要时通过 npx 启动 chrome-devtools-mcp。如在 CI 或需可重复性环境运行，建议将 @latest 替换为固定版本号（如 chrome-devtools-mcp@1.0.0）。

常见运行参数与实践建议 #

• 指定 Chrome 可执行路径：部分系统自动发现 Chrome 可能失败，建议在客户端或启动参数中显式指定 chromePath。

• Headless vs Headful：调试时建议使用 headful（带界面），自动化与 CI 环境建议使用 headless 或 headful 的无头 Chromium。

• 固定版本：CI/生产环境中建议指定具体版本，避免因 latest 引入不兼容变更。

• 权限与沙盒：Linux 容器运行时需注意 Chrome 的 sandbox 与权限配置，参考仓库 README 的 Docker/CI 说明。

在 CI 中的整合思路 #

\1. 在 CI runner 中安装或下载 Chromium，并明确 CHROME_PATH 环境变量指向可执行文件。

\2. 使用固定版本的 chrome-devtools-mcp 启动 MCP 服务（如通过 npx chrome-devtools-mcp@x.y.z）。

\3. 运行自定义自动化提示或脚本，如启动页面加载 trace、收集性能报告并将结果作为 artifact 上传。

对开发者和团队的直接价值 #

Chrome DevTools MCP 为开发者和团队带来如下直接价值：

• 自动化性能审计：在 CI 集成 MCP，可在 PR/Release 阶段自动生成性能回归报告。

• 精准自动化复现链路：结合 tracing 与堆快照，缩短问题发现到定位的周期。

• 面向 LLM 的可解释数据：代理可获取可操作的底层数据（而非仅截图），生成更可靠的补丁建议。

总结 #

Chrome DevTools MCP 将 Chrome DevTools 的深度调试能力带给代理与 LLM，填补了自动化脚本控制与深层调试之间的空白。对于追求性能、可靠性和可解释性的前端团队而言，它是高价值的工具链组件。欲了解实现细节、示例与参与贡献，请访问下列资源。

参考文献 #

\1. Chrome DevTools MCP - github.com

\2. Model Context Protocol - modelcontextprotocol.com

\3. Chrome DevTools MCP Tool Reference - github.com

\4. Chrome DevTools (MCP) for your AI agent - developers.googleblog.com