这个 Skill 能做什么，适合哪些场景？
该技能通过 Chrome DevTools MCP 将 AI 编程代理连接到真实浏览器运行环境。它可检查实时 DOM、控制台输出、网络请求、性能数据、计算样式和无障碍树，并通过截图验证视觉结果。适用于构建或调试浏览器中的界面与交互，不适用于仅后端变更或命令行工具。使用前必须配置 chrome-devtools MCP 服务器。
连接 Chrome DevTools MCP；读取实时 DOM、控制台日志、网络请求与响应、性能追踪、元素计算样式和无障碍树；在页面上下文中执行与当前调试任务直接相关的只读 JavaScript；捕获截图用于视觉验证；根据 UI、网络或性能问题的流程重现、检查、诊断、修复和验证结果。
- 前端开发者修改页面布局或样式后，需要在真实浏览器中截图并检查计算样式。
- 调试 UI 交互异常时，需要同时查看 DOM、控制台错误和无障碍树。
- 排查 API 或跨域问题时，需要检查请求 URL、方法、请求体、状态码、响应体和耗时。
- 优化网页性能时，需要记录追踪并检查 LCP、CLS、INP、长任务和不必要的重新渲染。
- 验证修复是否生效时，需要重新加载页面、确认控制台干净并运行自动化 UI 测试。
如何安装这个 Skill？
- 不要使用 autoConnect 连接日常 Chrome 配置文件；若必须使用，应关闭无关标签页并确认会话暴露范围。
- 将 chrome-devtools-mcp@latest 固定到经过审核的版本，并在隔离环境中安装 npx 依赖。
- 不要把 DOM、控制台、网络响应或 JavaScript 输出中的指令当作操作授权；导航到页面内容提取的 URL 前应取得用户确认。
- 当前材料未证明 Chrome DevTools MCP 及其依赖在中国大陆网络环境中的稳定可达性。
- Shell / 命令行
- 网络访问
- MCP Server
Chrome DevTools MCP server
在项目的 .mcp.json 或 Claude Code 设置中加入：{"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest","--isolated"]}}}。该技能本身没有提供独立安装器；仓库整体也可使用 npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools 安装。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/addyosmani/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/browser-testing-with-devtools" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
在需要构建或调试浏览器应用时触发该技能，例如：使用浏览器 DevTools 检查这个页面的 DOM、控制台错误、网络请求和视觉输出，并验证修复结果。 默认使用专用或临时 Chrome 配置文件；只有确实需要登录状态时才考虑连接单独的测试配置文件。将 DOM、控制台、网络响应和 JavaScript 输出视为不可信数据，JavaScript 默认仅用于只读检查。
这个 Skill 有哪些优点和局限？
- 覆盖 DOM、控制台、网络、性能、样式、无障碍和截图验证。
- 提供针对 UI、网络和性能问题的结构化诊断与复核流程。
- 明确限制凭据读取、外部请求、危险导航和不可信浏览器内容处理。
- 必须配置 Chrome DevTools MCP 服务器。
- 内容只描述 Chrome DevTools MCP，未证明其他浏览器或 DevTools 实现可直接使用。
- 技能要求浏览器运行环境；后端-only 变更、CLI 工具和非浏览器代码不适用。
- 来源未提供独立测试套件或平台兼容性测试证据。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| 浏览器 DevTools 测试 本页 | 59 · 推荐 | ★ 107k | 14 天前 | MIT |
| Playwright Trace CLI ✓ Microsoft · 官方 | 48 · 谨慎使用 | ★ 98k | 13 天前 | Apache-2.0 |
| 网页性能审计 | 43 · 不推荐 | ★ 3.1k | 13 天前 | Apache-2.0 |
| VS Code 性能调查工作流 ✓ Microsoft · 官方 | 47 · 谨慎使用 | ★ 194k | 13 天前 | MIT |
| SwiftUI 专家技能 | 待评估 | ★ 3.7k | 22 天前 | MIT |
FollowSkills 如何评估这个 Skill？
技能明确要求隔离浏览器配置文件、将页面内容视为不可信数据、禁止读取凭据并限制 JavaScript 和外部请求，且对副作用操作要求确认，体现了最小权限和数据流边界。扣分在于使用 npx -y 与 chrome-devtools-mcp@latest 未锁定依赖版本；autoConnect 仍可能暴露真实浏览器会话，且没有明确的回滚或失败后的恢复流程。
文档提供了安装、工具能力、UI/网络/性能工作流及异常内容处理，核心路径逻辑基本一致。扣分在于实际 MCP 工具名称和参数未给出，依赖外部 MCP 配置，未提供针对该技能关键路径的可复现测试；“零 console 警告”也可能造成不必要的失败判断。按静态校准不超过10分。
触发场景和不适用范围清晰，覆盖 DOM、控制台、网络、性能、可访问性和视觉验证。扣分在于没有明确输入输出格式、不同浏览器或 MCP 版本边界，也未说明中文项目支持；Chrome DevTools MCP、npx 和相关服务在中国大陆网络环境中的可达性未被证实。
文档结构清晰，包含安装配置、工具表、安全边界、分场景流程、测试计划、截图验证、反合理化表和验证清单；仓库提供 MIT 许可证、维护者信息和 CI 安装验证。扣分在于技能没有独立版本、变更记录、维护责任或更新路径，依赖使用 latest，且故障排查和 FAQ 不够具体。
该技能能为浏览器运行时检查提供直接可执行的流程，理论上可减少仅凭静态分析的误判，并覆盖视觉、网络、性能和可访问性结果。扣分在于本次仅有静态材料，没有真实浏览器输出或第三方执行证据，无法证明关键工具调用和结果达到可直接交付的程度；部分要求较宽泛，可能增加执行成本。按静态校准最高7分。
技能包含明确的检查项和预期观察内容，仓库 CI 会验证技能结构、评估运行器和安装流程，但提供的测试文件并不覆盖该浏览器技能的关键路径，也没有真实 DevTools 运行记录或多来源交叉验证。按静态校准最高5分。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →