一、背景：为什么需要浏览器自动化？

在日常工作中，我们经常需要做大量重复操作：

• 登录后台系统
• 填写表单
• 导出数据
• 执行测试流程

传统方案（如 Puppeteer / Playwright）虽然可以解决，但存在明显问题：

• 需要编写大量脚本
• 对页面变化敏感
• 与 AI 结合成本高

那么有没有一种方式可以：

让 AI 像人一样直接操作浏览器？

这就是 Chrome DevTools MCP 的价值。

二、什么是 Chrome DevTools MCP？

一句话概括：

MCP = 让 AI 拥有“操作浏览器的双手”

它基于 Chrome DevTools Protocol（CDP），将浏览器能力封装成 AI 可调用的接口，使 AI 可以直接完成：

• 打开网页
• 输入内容
• 点击按钮
• 获取页面数据
• 执行脚本

三、核心原理解析

MCP 本质是一个“中间层”：

AI → MCP Server → Chrome DevTools Protocol → 浏览器

各层作用

• CDP（底层）
  提供浏览器控制能力（点击、DOM、网络请求等）
• MCP（封装层）
  将 CDP 封装为 AI 可理解的接口
• AI（调用层）
  通过自然语言驱动浏览器操作

四、快速上手（部署步骤）

环境准备

• Node.js
• Chrome 浏览器

---

启动 MCP 服务

npx chrome-devtools-mcp

---

配置（示例）

{
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": ["-y", "chrome-devtools-mcp"]
}
}

五、CDP 实际是怎么工作的？

我们来看一个最底层的调用

示例：打开页面

const CDP = require('chrome-remote-interface');

(async () => {
const client = await CDP();

const { Page } = client;

// 启用 Page 模块
await Page.enable();

// 打开页面
await Page.navigate({
url: 'https://example.com'
});

})();

六、操作页面

示例：点击按钮

const { Runtime } = client;

await Runtime.evaluate({
expression: `
document.querySelector('#loginBtn').click()
`
});

本质：

通过 CDP，让浏览器执行一段 JS

七、实战案例

自动化测试

传统测试流程需要人工逐步操作页面：

• 登录系统

• 创建数据

• 提交表单

• 校验结果

使用 MCP 后：

1. 自动打开测试页面

2. 自动输入账号密码

3. 自动完成表单填写

4. 自动提交并校验结果

测试流程可以反复执行，用于回归测试和批量验证。

性能测试

页面性能分析通常需要借助 DevTools 手动查看。

通过 MCP，可以自动完成：

1. 打开目标页面

2. 获取加载时间

3. 统计请求数量

4. 分析资源体积

最终输出结构化性能数据，甚至自动生成报告。

自动化运营

日常运营工作往往重复且耗时：

• 登录后台

• 导出数据

• 整理 Excel

• 输出日报

通过 MCP：

1. 定时登录系统

2. 自动导出数据

3. 自动整理分析

4. 自动生成报告

运营工作从“人工执行”，转变为“自动运行”。

 竞品分析

竞品分析通常依赖人工收集信息：

• 查看页面

• 截图记录

• 手动整理

使用 MCP 后：

1. 自动打开竞品网站

2. 抓取页面数据

3. 提取关键信息

4. 输出分析结果

竞品分析从“人工收集”，升级为“自动化情报”。

八、MCP vs Puppeteer 对比

AI 集成	强	弱
开发成本	低	高
操作方式	类自然语言	代码驱动
灵活性	高	中
维护成本	低	高

总结

Chrome DevTools MCP 的核心价值在于：

让浏览器里的所有操作，都可以被 AI 自动执行

它不仅是一个工具，更是一层能力：

• 将重复操作自动化

• 将流程变成可执行脚本

• 将人从低效工作中解放出来