一个 MCP，让浏览器变成“自动打工人”

一、背景为什么需要浏览器自动化在日常工作中我们经常需要做大量重复操作登录后台系统填写表单导出数据执行测试流程传统方案如 Puppeteer / Playwright虽然可以解决但存在明显问题需要编写大量脚本对页面变化敏感与 AI 结合成本高那么有没有一种方式可以让 AI 像人一样直接操作浏览器这就是Chrome DevTools MCP的价值。二、什么是 Chrome DevTools MCP一句话概括MCP 让 AI 拥有“操作浏览器的双手”它基于 Chrome DevTools ProtocolCDP将浏览器能力封装成 AI 可调用的接口使 AI 可以直接完成打开网页输入内容点击按钮获取页面数据执行脚本三、核心原理解析MCP 本质是一个“中间层”AI → MCP Server → Chrome DevTools Protocol → 浏览器各层作用CDP底层提供浏览器控制能力点击、DOM、网络请求等MCP封装层将 CDP 封装为 AI 可理解的接口AI调用层通过自然语言驱动浏览器操作四、快速上手部署步骤环境准备Node.jsChrome 浏览器启动 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 后自动打开测试页面自动输入账号密码自动完成表单填写自动提交并校验结果测试流程可以反复执行用于回归测试和批量验证。性能测试页面性能分析通常需要借助 DevTools 手动查看。通过 MCP可以自动完成打开目标页面获取加载时间统计请求数量分析资源体积最终输出结构化性能数据甚至自动生成报告。自动化运营日常运营工作往往重复且耗时登录后台导出数据整理 Excel输出日报通过 MCP定时登录系统自动导出数据自动整理分析自动生成报告运营工作从“人工执行”转变为“自动运行”。竞品分析竞品分析通常依赖人工收集信息查看页面截图记录手动整理使用 MCP 后自动打开竞品网站抓取页面数据提取关键信息输出分析结果竞品分析从“人工收集”升级为“自动化情报”。八、MCP vs Puppeteer 对比AI 集成强弱开发成本低高操作方式类自然语言代码驱动灵活性高中维护成本低高总结Chrome DevTools MCP 的核心价值在于让浏览器里的所有操作都可以被 AI 自动执行它不仅是一个工具更是一层能力将重复操作自动化将流程变成可执行脚本将人从低效工作中解放出来