二、方案选型
2.1 什么是 Chrome DevTools Protocol MCP？
Chrome DevTools Protocol MCP 是一个 Model Context Protocol（MCP）服务器，它允许 AI 助手通过协议直接与 Chrome 浏览器交互。换句话说，你可以用自然语言指挥 AI 操作浏览器。
官方仓库地址：github.com/anthropics/…
2.2 为什么选择它？
| 方案 | 优点 | 缺点 |
|---|---|---|
| 手动检查 | 无需技术准备 | 效率低、易遗漏 |
| Selenium/WebDriver | 功能强大 | 需要编写代码、配置复杂 |
| Puppeteer | 灵活性高 | 仍需编写脚本 |
| Chrome DevTools Protocol MCP | AI 直接控制浏览器、无需编写脚本 | 需要 MCP 环境 |
三、实现步骤
3.1 环境准备
首先，你需要安装 Chrome DevTools Protocol MCP。以下是安装命令：
# 使用 uvx 安装
uvx mcp-server-devtools
或者使用 npx：
npx @anthropic-ai/mcp-server-devtools
3.2 配置 MCP
在项目的 MCP 配置文件中添加：
{
"mcpServers": {
"chromedevtools": {
"command": "uvx",
"args": ["mcp-server-devtools"]
}
}
}
3.3 自动化检查脚本
配置完成后，你可以直接用自然语言指挥 AI。以下是我们当时使用的提示词：
请帮我完成以下任务：
1. 访问 https://example.com/page1
2. 检查页面标题是否包含关键词
3. 检查所有图片是否有 alt 属性
4. 测量页面加载时间
5. 检查是否有 404 链接
6. 将结果整理成 JSON 格式输出
AI 会自动：
- 启动浏览器
- 打开指定页面
- 执行各项检查
- 汇总结果
3.4 批量处理多个页面
对于 100+ 页面，我们可以让 AI 循环处理：
请依次访问以下页面列表，对每个页面执行 SEO 检查：
- https://example.com/page1
- https://example.com/page2
- https://example.com/page3
...（共 100+ 个）
对每个页面检查：
1. 标题和 meta 描述
2. 图片 alt 属性
3. 页面性能指标
4. 死链接检测
最后生成一个汇总报告，包含每个页面的检查结果。
四、核心代码示例
虽然 MCP 可以用自然语言操作，但有些场景我们还是需要编写简单的脚本。以下是一个使用 Puppeteer 配合 MCP 的示例：
const puppeteer = require('puppeteer');
async function analyzePage(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 记录页面加载时间
const startTime = Date.now();
await page.goto(url, { waitUntil: 'networkidle2' });
const loadTime = Date.now() - startTime;
// 检查图片 alt 属性
const images = await page.evaluate(() => {
const imgs = Array.from(document.querySelectorAll('img'));
return imgs.map(img => ({
src: img.src,
alt: img.alt,
hasAlt: !!img.alt
}));
});
// 检查死链接
const links = await page.evaluate(() => {
const as = Array.from(document.querySelectorAll('a[href]'));
return as.map(a => a.href).filter(h => h.startsWith('http'));
});
await browser.close();
return {
url,
loadTime,
images,
links,
missingAlt: images.filter(img => !img.hasAlt).length
};
}
// 批量分析
async function batchAnalyze(urls) {
const results = [];
for (const url of urls) {
console.log(`正在分析: ${url}`);
const result = await analyzePage(url);
results.push(result);
}
return results;
}
五、效果对比
| 指标 | 手动检查 | MCP 自动化 |
|---|---|---|
| 100 页面耗时 | 8+ 小时 | 约 15 分钟 |
| 准确率 | 约 85% | 约 98% |
| 重复性工作 | 高 | 无 |
| 报告生成 | 手动整理 | 自动生成 |
最关键的是：整个过程无需编写复杂的爬虫脚本，只需要用自然语言描述需求，AI 就能帮你完成。
六、注意事项与最佳实践
6.1 常见坑
- 页面渲染延迟：某些页面是 SPA（单页应用），需要等待 JavaScript 执行完成后再分析。建议使用
waitUntil: 'networkidle2'或等待特定元素出现。 - 反爬虫机制：部分网站有反爬虫措施，需要设置合适的 User-Agent 或使用 puppeteer 的 stealth 模式。
- 资源限制：批量处理时注意控制并发数，避免被目标网站封禁 IP。
6.2 进阶用法
- 截图功能：让 AI 对每个页面截图，生成可视化报告
- 性能分析：利用 Chrome DevTools 的 Performance API 获取更详细的性能数据
- 交互测试：模拟用户点击、滚动等行为，测试页面交互性
总结
通过 Chrome DevTools Protocol MCP，我们成功将 100+ 页面的 SEO 检查从 8 小时缩短到 15 分钟，效率提升了 30+ 倍。
这个案例告诉我们：AI + 自动化工具的组合，可以极大地释放生产力。与其花时间做重复性工作，不如思考如何让 AI 帮我们完成。
如果你也有类似的重复性浏览器操作需求，不妨试试 Chrome DevTools Protocol MCP。
