ChromeDevTools/chrome-devtools-mcp
项目简介
面向编程智能体的Chrome开发者工具
Chrome DevTools for coding agents
智能解读
Chrome DevTools MCP 是一个基于 Model-Context-Protocol (MCP) 的服务器工具，它允许 AI 编程助手（如 Claude、Cursor 或 Copilot）直接连接并控制一个正在运行的 Chrome 浏览器。通过将 Chrome 开发者工具的强大功能转化为 AI 可调用的工具，该项目使 AI 能够执行可靠的浏览器自动化、进行深度调试和性能分析。具体而言，AI 可以录制性能追踪、分析网络请求、截取屏幕截图以及检查控制台日志，甚至结合 Puppeteer 实现复杂的自动化操作。这为开发者提供了一个智能的辅助伙伴，能够协助排查网页问题、优化性能或自动执行重复的浏览器测试任务，显著提升开发效率。需要注意的是，该工具会向 AI 客户端暴露浏览器实例的全部内容，因此应避免在处理敏感信息时使用。
使用场景
这个项目最适合需要将Chrome DevTools的强大调试和性能分析能力集成到AI编程工作流中的场景。
自动化网页性能分析
开发者需要手动在Chrome DevTools中录制性能追踪、分析网络请求和运行时性能，过程繁琐且难以自动化。
通过AI助手调用MCP服务器，自动录制性能追踪、分析网络瀑布图并生成性能报告，实现一键式性能分析。
让AI助手自动打开目标网页，录制Lighthouse性能追踪，分析关键性能指标（FCP、LCP等），并生成优化建议报告。
智能网页调试助手
调试复杂的前端问题时，开发者需要反复在浏览器控制台、网络面板和源代码之间切换，效率低下。
AI助手可以直接通过MCP服务器检查控制台错误（带源码映射）、分析网络请求状态和内容，快速定位问题根源。
网页加载异常时，让AI助手自动检查控制台错误堆栈、分析失败的XHR/Fetch请求，并截图当前页面状态供分析。
可靠浏览器自动化
传统的浏览器自动化脚本（如Puppeteer）编写和维护复杂，需要处理各种等待条件和异常情况。
AI助手通过MCP服务器控制浏览器，利用Puppeteer的自动等待机制，智能执行点击、输入、导航等操作并验证结果。
让AI助手自动完成一个多步骤的表单填写和提交流程，在每个步骤后检查页面状态，确保操作成功执行。
结合真实用户数据
实验室性能数据与真实用户体验脱节，开发者难以获得全面的性能洞察。
项目可自动将性能追踪数据发送到Google CrUX API，获取真实用户的性能数据，提供实验室与现场数据的对比分析。
分析某电商网站商品详情页时，不仅获得实验室性能指标，还能看到真实用户在该页面的LCP、FID等核心Web指标数据。
项目健康度
综合活跃度、人气、增长、社区、文档评估
项目信息
赞赏支持
如果本站对你有帮助，欢迎打赏支持
微信
支付宝
Widget 徽章
相关项目推荐
freeCodeCamp/freeCodeCamp
freeCodeCamp.org开源代码库与课程体系，免费学习数学、编程与计算机科学
kamranahmedse/developer-roadmap
提供交互式学习路线图、指南和其他教育内容，帮助开发者在职业生涯中成长。
openclaw/openclaw
属于你个人的AI助手。全操作系统支持。全平台兼容。龙虾之道。🦞
vuejs/vue
此仓库为Vue 2版本。Vue 3版本请访问https://github.com/vuejs/core
microsoft/vscode
Visual Studio Code
n8n-io/n8n
具备原生AI能力的公平代码工作流自动化平台。支持可视化构建与自定义代码，可选自托管或云端部署，集成400多种服务。
加载评论中...