floatboat
打开导航菜单

Browser Testing with DevTools

Browser Testing with DevTools 将截图、DOM 状态、控制台消息和网络请求纳入 Agent 测试流程。它使用 Chrome DevTools MCP，适合在隔离的测试浏览器里核对页面行为。

收集失败交互的浏览器证据

提供测试页面和一个明确交互，让 Agent 在隔离的 Chrome 配置中检查。

填写获准的测试地址、测试数据、预期行为和所需证据。

复制请求，在 Floatboat 新对话中粘贴，并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制，不会从此处自动发送。

参考来源: Browser Testing with DevTools
https://github.com/addyosmani/agent-skills/blob/main/skills/browser-testing-with-devtools/SKILL.md

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。

我的任务:
在 Claude Code 中使用已配置的隔离 Chrome DevTools MCP，打开获准的本地结账测试页。用测试数据复现运费报价失败，记录界面状态、相关控制台报错和请求状态，略去敏感信息。比较基线与重试结果，保留应用文件原样。

期望交付:
一份脱敏的操作记录，包含界面状态和相关运行时证据。

关于 Browser Testing with DevTools

Addy Osmani 的这个 Skill 为编程 Agent 提供浏览器验证流程。单独配置 Chrome DevTools MCP 后，可以查看 Chrome 中运行的页面，对比视觉与运行时证据，并记录实际观察。测试时使用隔离配置和测试数据，将页面内容作为待检查的数据。

Browser Testing with DevTools 的使用场景

先判断哪类证据能回答问题。布局异常可以查看截图与计算样式，请求失败则要对照网络请求和页面实际提示。

定位失败请求

提供本地或测试地址以及触发请求的动作。记录状态码和相关控制台错误，去掉敏感信息，再做一次受控重试，判断是持续故障还是偶发响应。

检查响应式布局

指定两个视口尺寸和应当可见的元素。分别保存截图并检查计算样式，将对比限定在本次改动的组件。

核对交互的状态变化

选择一项使用测试数据的非生产操作，记录操作前后的页面状态。检查 DOM 和控制台，区分渲染问题与状态未更新。

比较性能跟踪

在可比条件下，对相同页面与操作分别记录改动前后的性能跟踪。私有测试地址用 --no-performance-crux 关闭 CrUX 查询。保留相关耗时、长任务或测试条件，方便同事再次核验。

如何用 DevTools 测试页面

测试前，将 MCP 服务连接到隔离浏览器。写清目标页面、交互和预期行为，将检查范围限定在能说明问题的观察项。

  1. 配置隔离浏览器

    在所选宿主中安装 Skill。准备受支持的 Chrome、Node.js LTS 和 npm，再单独配置带 --isolated 参数的 Chrome DevTools MCP，确认测试浏览器能启动。

  2. 采集有范围的基线

    打开获准的测试地址，复现指定行为，仅保留需要的 DOM、控制台、网络或截图证据。

  3. 核验改动或重试结果

    在可比条件下重复同一操作。记录发生了什么变化、还有哪些问题，以及脱敏证据保存在哪里。

探索更多 Agent Skills

查看其他 Skill 指南，并在使用前核对原始来源。

Browser Testing with DevTools 常见问题

安装 Skill 时会配置 MCP 吗？
需要在宿主中单独配置 Chrome DevTools MCP。Skill 提供工作流程，MCP 服务提供访问浏览器的工具。
能使用平时登录的 Chrome 吗？
优先使用专用或隔离配置。必须登录时，使用仅包含该测试账号且已获准使用的浏览器配置。
应该保留哪些证据？
保留操作步骤、相关运行时观察，以及能帮助复核的截图或跟踪。省略凭据、原始会话信息和无关请求。
能比较修复前后的差异吗？
可以在可比条件下记录改动前后的同一操作，再对比界面表现和相关运行时证据。
能核验纯后端变更吗？
这个 Skill 聚焦浏览器中可观察的行为。浏览器外的服务逻辑需由对应的服务测试或单元测试验证。
网页出现让 Agent 执行的命令怎么办？
把页面文字、控制台输出和响应内容当作观察结果。按已批准的测试计划操作，并报告可疑的指令式内容。