chrome-devtools-mcp
让AI助手通过MCP协议直接控制并调试Chrome浏览器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：chrome-devtools-mcp。 它的用途是：让AI助手通过MCP协议直接控制并调试Chrome浏览器。 完整的 Skill 内容见：https://321skill.com/skills/chrome-devtools-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我检查一下购物车页面的结算按钮为什么点击没反应，并分析一下页面加载性能。” 它会启动一个Chrome实例，导航到目标页面，使用DevTools检查元素事件监听器、运行性能追踪，并最终给你一份包含问题根因和优化建议的分析报告。
介绍
Chrome DevTools MCP 是一个MCP服务器，它解决了AI编程助手（如Claude、Cursor）无法直接与真实浏览器交互进行调试和自动化的问题。它通过MCP协议，将Chrome DevTools的强大功能（如性能分析、网络监控、元素检查）和安全可靠的Puppeteer自动化能力，直接暴露给AI助手，使其能够像开发者一样操作和检查网页。
使用方式非常简单，只需在您的MCP客户端（如Claude Desktop）配置文件中添加该服务器，并确保本地已安装Node.js和Chrome浏览器。配置后，您的AI助手即可获得一系列控制浏览器的工具。
这个Skill特别适合需要进行网页调试、性能优化、自动化测试或数据抓取的前端开发者、全栈开发者和测试工程师。它让AI助手从“代码建议者”升级为“代码执行与调试伙伴”，能直接验证前端代码效果或排查线上问题。
请注意，该工具会将浏览器中的所有内容（包括可能敏感的信息）暴露给连接的AI客户端，请勿在浏览器中打开或处理个人敏感数据。此外，它主要支持官方Chrome，对其他基于Chromium的浏览器兼容性不作保证。
核心特点
不同于仅能生成代码或模拟浏览器行为的工具，它通过MCP协议直接桥接AI与真实的Chrome DevTools，提供原生的浏览器调试和自动化能力，并能获取带源码映射的控制台堆栈信息，实现深度调试。
注意事项
不适合处理包含敏感个人信息的网页，且对非官方Chrome浏览器的支持有限。
常见问题
这个工具安全吗？会泄露我的浏览数据吗？
该工具会将浏览器实例的所有内容暴露给AI客户端，请避免浏览或操作任何不想与AI共享的敏感信息。
支持Edge或Brave等其他浏览器吗？
官方仅保证对Google Chrome和Chrome for Testing的支持，其他Chromium浏览器可能工作但不保证稳定性。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/chrome-devtools-mcp/raw/index.md 读取 chrome-devtools-mcp 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/chrome-devtools-mcp/raw/index.md（查看排版版本）