cc_chrome_devtools_mcp_skill
让AI拥有浏览器之眼，实现前端自动化调试与性能分析。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：cc_chrome_devtools_mcp_skill。 它的用途是：让AI拥有浏览器之眼，实现前端自动化调试与性能分析。 完整的 Skill 内容见：https://321skill.com/skills/cc-chrome-devtools-mcp-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请分析https://myapp.com的登录页面，检查其加载性能、核心Web指标和主要的可访问性问题。” 它会自动启动浏览器访问该页面，运行性能追踪，审查无障碍树，并生成一份包含具体指标、问题列表和改进建议的详细报告。
介绍
这个Skill解决了前端开发中AI调试“盲人摸象”的痛点。传统上，开发者需要手动截图、描述问题，与AI来回沟通，效率低下且容易出错。通过集成Chrome DevTools Protocol，它赋予Claude直接“看见”并操作真实浏览器环境的能力。
使用方式非常直接。安装并配置好必要的MCP服务器后，你只需在Claude Code中描述你的测试或调试需求，例如“测试https://example.com的性能”或“检查登录表单的可访问性问题”。AI便会自动启动浏览器会话，执行相应操作并返回详细的分析报告。
它非常适合前端开发、全栈开发和测试工程师。无论是日常开发中需要快速验证UI、排查布局问题，还是在发布前进行全面的性能、可访问性和网络分析，这个Skill都能显著提升效率。
使用建议：首次使用前务必正确配置chrome-devtools-mcp服务器和MCP设置文件。出于安全考虑，强烈建议在配置中使用--isolated=true参数，以确保每次测试都使用临时的、干净的浏览器配置文件。
核心特点
与仅能分析代码或依赖手动截图的工具不同，它通过MCP直接桥接Chrome DevTools，让AI能实时交互、测量真实渲染性能（如Core Web Vitals）并自动化执行浏览器操作，实现了从“猜测”到“真实环境验证”的质变。
注意事项
不适合需要脱离浏览器环境进行的纯逻辑代码调试或后端API测试。
常见问题
安装后Claude没有反应怎么办？
请先运行`claude mcp list`命令，确认`chrome-devtools`服务器已正确安装并出现在列表中。
这个Skill安全吗？会泄露我的浏览数据吗？
在MCP配置中使用`--isolated=true`参数是关键，它能确保每次测试都使用独立的临时浏览器配置文件，测试结束后自动清理，有效保护隐私。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cc-chrome-devtools-mcp-skill/raw/index.md 读取 cc_chrome_devtools_mcp_skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cc-chrome-devtools-mcp-skill/raw/index.md（查看排版版本）