Chrome DevTools 浏览器实测
让 Agent 通过 Chrome DevTools MCP 读取真实浏览器的 DOM、控制台、网络和性能数据，验证页面而不是只看代码。
技能说明
适合 UI 开发、调试和发布前检查。需要额外配置 Chrome DevTools MCP；默认使用隔离浏览器配置，网页内容一律按不可信数据处理，不读取 Cookie、令牌或其他凭据。
关于此技能
Addy Osmani 的生产级工程技能之一，要求 Agent 用 Chrome DevTools MCP 直接观察真实浏览器，再根据 DOM、控制台、网络、性能和可访问性数据做判断。许可证：MIT。
核心能力
真实浏览器验证
读取页面 DOM、控制台日志、网络请求、截图和性能数据，避免只凭代码推测页面是否正常。
从复现到复核
按复现、检查、定位、修复、重新加载和验证的顺序处理 UI 问题，并要求留下可核对的结果。
安全使用浏览器
默认使用独立或临时浏览器配置；把网页内容当作不可信数据，不读取 Cookie、令牌或其他凭据。
适用场景
前端页面开发与调试
适合检查布局、交互、控制台报错、接口请求和真实渲染效果。
发布前回归检查
适合用截图、网络记录、性能数据和可访问性树确认修复确实生效。
使用步骤
- 01
第一步：配置工具
在项目配置中加入 Chrome DevTools MCP，默认使用 npx -y chrome-devtools-mcp@latest --isolated。
- 02
第二步：复现问题
打开目标页面并触发问题，先记录截图和实际表现。
- 03
第三步：读取证据
检查 DOM、控制台、网络、性能和可访问性信息，区分页面事实与推测。
- 04
第四步：修复并复核
完成修改后重新加载页面，再检查截图、控制台和自动化测试结果。
常见问题
只写后端接口时需要用它吗？+
不需要。它面向会在浏览器中运行的页面；纯后端或命令行任务不适合使用。
可以连接我日常使用的 Chrome 吗？+
默认不建议。优先使用独立或临时配置；只有确实需要登录态时才考虑单独的测试配置，不要把邮箱、支付和其他日常标签页暴露给 Agent。
单独安装这个技能会缺少内容吗？+
可能会。仓库说明单技能安装只复制 skills/<name>，不会复制共享 references；需要共享检查清单时应安装整个仓库或补齐 references。
npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools