Chrome DevTools MCP 评测：Google 官方出品，让 AI Agent 直接操控浏览器

Chrome DevTools MCP：让 AI Agent 真正操控浏览器

一句话简介：Chrome DevTools MCP 是由 Google Chrome 团队官方发布的 Model Context Protocol 服务器，为 AI 编程代理提供完整的 Chrome 浏览器操控能力，包括页面导航、元素交互、截图、网络请求监控和 DevTools 调试，50K+ GitHub 星标。

工具概览

属性	信息
仓库地址	ChromeDevTools/chrome-devtools-mcp
开发者	Google Chrome DevTools 团队
GitHub 星标	⭐ 50,726
语言	TypeScript
许可证	Apache 2.0
最近更新	2026年9月
官网	chromium.googlesource.com

核心功能

1. 完整的浏览器操控能力

Chrome DevTools MCP 通过 Model Context Protocol 暴露了一系列工具，让 AI 代理能够像人类一样操作 Chrome 浏览器：

页面导航：打开 URL、前进后退、刷新页面
元素交互：点击、输入文本、选择下拉选项、拖拽
截图与录制：页面截图、滚动截图、操作录制
网络监控：拦截和查看网络请求与响应
控制台访问：读取 Console 日志、执行 JavaScript

2. DevTools 深度集成

与普通的浏览器自动化工具不同，Chrome DevTools MCP 直接对接 Chrome DevTools Protocol (CDP)，这意味着它可以：

访问 Elements 面板，实时查看和修改 DOM
使用 Network 面板监控所有网络流量
通过 Console 面板捕获错误和日志
调试 Performance 面板记录性能数据
操控 Application 面板管理本地存储和 Cookie

3. AI Agent 原生设计

Chrome DevTools MCP 专门为 AI 编程代理设计，而非传统的 Selenium 或 Puppeteer 脚本：

MCP 协议标准化：遵循 Model Context Protocol 规范，可被任何支持 MCP 的 AI 客户端使用
工具调用简化：将复杂的 CDP 操作封装为简单的工具调用
上下文感知：代理可以基于页面状态做出智能决策
多会话管理：同时操控多个浏览器标签页和窗口

4. 与主流 AI 框架无缝集成

Chrome DevTools MCP 可以轻松接入各种 AI 开发框架：

Claude Code / Cursor / Windsurf：直接在编码代理中使用浏览器能力
LangChain / LangGraph：作为工具添加到 Agent 工作流中
AutoGPT / CrewAI：增强多代理协作中的网页交互能力
自定义 MCP 客户端：通过标准协议接入任何 MCP 兼容的 AI 应用

5. 安全与隐私保障

作为 Google 官方项目，Chrome DevTools MCP 在设计上充分考虑了安全考量：

本地运行，数据不离开你的机器
明确的权限控制，代理只能访问你授权的操作
无遥测收集，符合企业合规要求
开源代码可审计，透明可控

适用人群

AI 开发者：需要为 Agent 添加浏览器自动化能力的工程师
自动化工具开发者：构建网页测试、数据采集、RPA 解决方案的团队
前端工程师：利用 AI 辅助进行 Web 调试和页面分析
技术研究者：探索 AI Agent 与浏览器交互的新范式
企业 IT：需要安全可控的浏览器自动化方案的组织

与同类工具对比

维度	Chrome DevTools MCP	Selenium	Playwright	Puppeteer
开发方	Google 官方	Open社区	Microsoft	Google
协议	MCP 标准	WebDriver	自有协议	CDP
AI 原生	✅ 专为 Agent 设计	❌ 通用自动化	⚠️ 部分支持	❌ 通用自动化
调试能力	深度 DevTools	基础	中等	中等
学习曲线	低（工具调用）	高	中	中
多浏览器	Chrome only	✅ 全支持	✅ 全支持	Chrome only
异步支持	✅ 原生	⚠️ 需适配	✅ 原生	✅ 原生
GitHub 星标	50K+	27K+	67K+	64K+
许可证	Apache 2.0	Apache 2.0	Apache 2.0	BSD

关键区别：Chrome DevTools MCP 的独特价值在于它填补了「浏览器自动化」和「AI Agent 集成」之间的空白。Selenium 和 Playwright 是优秀的通用自动化工具，但它们需要编写大量代码才能实现简单的浏览器操作。Chrome DevTools MCP 将这些能力封装为即调即用的工具，AI 代理可以直接理解和使用，大幅降低了集成成本。

如何使用

环境准备

确保你的系统已安装： - Node.js 18+ 或 Bun - Google Chrome 浏览器（最新稳定版） - 一个支持 MCP 的 AI 客户端（如 Claude Code、Cursor 或 VS Code 扩展）

方式一：通过 MCP 客户端使用

安装 MCP 服务器：
```
npm install -g @chrome-devtools/mcp
```

在你的 AI 客户端配置中添加 MCP 服务器：

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

启动 AI 客户端，MCP 工具将自动可用。

方式二：编程方式集成

安装依赖：
```
npm install @chrome-devtools/mcp
```

在代码中使用：

import { ChromeDevToolsMCP } from '@chrome-devtools/mcp';

const mcp = new ChromeDevToolsMCP();

// 连接到 Chrome
await mcp.connect();

// 导航到页面
await mcp.navigate('https://example.com');

// 执行交互
await mcp.click('#submit-button');
await mcp.fillInput('#search', '查询内容');

// 获取页面内容
const content = await mcp.getPageContent();
console.log(content);

// 截图
await mcp.screenshot('result.png');

// 断开连接
await mcp.disconnect();

方式三：在 AI Agent 工作流中使用

将 Chrome DevTools MCP 集成到你的 AI Agent 中：

# 以 LangChain 为例
from langchain.tools import MCPTool

chrome_tool = MCPTool(
    name="chrome_browser",
    description="使用 Chrome DevTools 操控浏览器",
    mcp_server="chrome-devtools"
)

# 在 Agent 中使用
from langchain.agents import create_agent
agent = create_agent(tools=[chrome_tool])

常用工具示例

工具名称	功能描述
`navigate`	导航到指定 URL
`click`	点击页面上的元素
`fill`	向输入框填写文本
`screenshot`	截取页面截图
`get_text`	获取页面文本内容
`evaluate`	执行 JavaScript 代码
`get_network_requests`	获取网络请求列表
`get_console_logs`	获取控制台日志

总结与推荐

优点

官方背书：Google Chrome 团队开发，稳定性和安全性有保障
AI 原生设计：专为 MCP 协议设计，AI 代理可直接理解和调用
深度调试：完整对接 Chrome DevTools Protocol，远超普通自动化框架
简单易用：工具化接口，无需编写大量自动化代码
安全可控：本地运行，无数据外泄风险

缺点

仅支持 Chrome：目前只支持 Chromium 内核浏览器
相对较新：生态还在成长中，社区资源和教程有限
需要 Chrome 运行：依赖本地安装的 Chrome 浏览器实例