Chrome DevTools MCP开源AI浏览器控制工具，实现自动化测试与深度调试

Chrome DevTools MCP：让AI助手掌控真实浏览器

你是否曾希望你的AI编程助手（如Claude、Cursor或Copilot）能像真人一样操作浏览器，进行自动化测试、性能分析和深度调试？Chrome DevTools MCP 的出现，旨在彻底解决这个问题。它是一个基于 Model-Context-Protocol (MCP) 的服务器，为你的AI编码助手提供了完整的Chrome DevTools控制能力，实现了可靠的自动化、深度调试和性能分析。

截至收录：
Chrome DevTools MCP项目stars数：21391
Chrome DevTools MCP项目forks数：1281

Chrome DevTools MCP项目目录截图

Chrome DevTools MCP项目核心亮点

🤖 赋予AI“双手”：让AI编码助手能够直接控制一个真实的Chrome浏览器实例，执行点击、导航、输入等操作，将想法直接转化为可交互的自动化流程。
🔍 深度调试与分析：AI可以访问完整的DevTools能力，包括分析网络请求、录制性能追踪、获取控制台日志和截图，进行专业的Web应用诊断。
⚙️ 可靠自动化：底层基于Puppeteer，自动化操作稳定可靠，并能自动等待页面加载和操作结果，减少了传统脚本中的时序问题。
🔌 广泛兼容：作为标准MCP服务器，可与众多主流AI助手和IDE无缝集成，包括Claude Desktop、Cursor、VS Code Copilot、Gemini Code Assist等。

Chrome DevTools MCP项目快速开始

只需几步配置，你的AI助手就能获得浏览器控制权：

1. 配置你的MCP客户端：
   在你的MCP客户端（如Claude Desktop）配置文件中添加以下内容：

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

2. 发出你的第一个指令：
   在AI助手的对话框中输入：

   检查 https://developers.chrome.com 的性能

   AI将自动启动浏览器并为你录制一份性能追踪报告。

3. 探索更多工具：
   配置成功后，AI即可使用包括点击(click)、填写表单(fill_form)、性能分析(performance_start_trace)、截图(take_screenshot)等在内的26种工具。

Chrome DevTools MCP项目应用场景

场景一：自动化端到端测试：开发者或测试工程师可以口述测试场景，由AI助手自动生成并执行浏览器操作，完成复杂的用户流程验证，极大提升测试效率。
场景二：性能分析与优化：前端开发者可以指令AI对目标网页进行性能追踪，自动分析并指出渲染瓶颈、过大的网络请求等可优化点，辅助性能调优。
场景三：数据抓取与内容监控：无需编写爬虫脚本，直接要求AI助手导航到特定页面，执行交互操作（如登录、翻页），并提取、汇总所需的结构化数据。
场景四：无障碍与兼容性检查：通过AI控制浏览器进行不同设备尺寸的模拟(emulate)，快速检查页面的响应式布局或捕捉控制台错误，辅助开发调试。

用户案例：作为由Chrome DevTools团队官方维护的项目，它正被全球的开发者集成到他们的AI工作流中，用于提升Web开发和测试的智能化水平。

Chrome DevTools MCP项目链接

ChromeDevTools / chrome-devtools-mcp项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp

本文地址：https://www.tgoos.com/38088