Chrome DevTools MCP

不只查看页面外观，还能调查故障原因。Chrome DevTools MCP 将页面结构、控制台信息、网络请求和性能轨迹接到 Agent，让可见现象与实际运行证据对应。

解释失败的网页请求

保存失败可能来自请求、服务端响应或页面处理。把这些观察放在一起，可以区分已有证据与尚需验证的解释。

测试 URL 与失败交互

测试网址、保存失败步骤、测试输入、预期响应与已配置 Chrome 连接。

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

下载 Floatboat

带入 Floatboat 的请求

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

参考来源: Chrome DevTools MCP
https://github.com/ChromeDevTools/chrome-devtools-mcp

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

我的任务:
用 Chrome DevTools MCP 复现测试页面保存失败，检查相关请求与控制台错误，区分客户端和服务端问题，先报告证据再建议代码修改。

期望交付:
请求与控制台时间线、有证据的原因及验证计划。证据不足时列出失败步骤与未解决问题。

关于 Chrome DevTools MCP

Chrome DevTools MCP 将编码 Agent 连接到受支持的 Chrome，提供检查与自动化。它特别适合用运行证据解释现象：表单失败可对照请求与控制台信息，慢页面可用性能轨迹调查。宿主负责分析证据，工具本身不会决定应用本应如何工作。

页面工具使用 pageId 选择目标，可由 list_pages 或新建页面取得；take_snapshot 则为该页面控件返回 uid。两者不是同一对象：pageId 选择浏览器页面，uid 标识某次观察中的控件。多个开发标签页同时打开时，准确选择目标尤其重要。

官方仓库提供 MCP 配置、CLI、浏览器操作与专项调试 Skill。完整浏览器 Skill 不适用于 slim 模式，扩展与内存工具需要显式启用。Floatboat 可在准备运行环境后采用对应外部 Agent MCP 路径。Apache-2.0 管理项目源码；Chrome 组件、宿主模型及文档中的使用统计需分别考虑。

将页面现象与运行证据关联

请求失败、渲染迟缓和持续保留的内存需要不同取证方式，应按问题选择工具。页面 ID 与当前快照则让这些调查始终对应目标页面，避免在另一个标签页收集到不相关结果。

关联控制台与请求
围绕复现动作读取请求与控制台，区分客户端校验、传输失败和服务端错误。检查具体请求，不将所有控制台警告都视为原因。
基于轨迹的性能诊断
限定范围的性能轨迹可展示迟缓交互背后的加载与渲染工作。比较代码效果前，应保持设备、缓存和网络条件可比。
显式启用的专项工具
官方 Skill 覆盖 LCP、无障碍、Cookie 和内存。完整配置中，扩展工具需要 --categoryExtensions，内存工具需要 --memoryDebugging。

四类不同的诊断问题

根据可观察现象选择调查。请求、性能、内存和扩展工作需要不同输入与失败解释，不能用同一页面截图替代所有运行证据；也不必为一个问题开启全部专项工具。

解释保存请求失败

提供测试网址、测试记录和触发保存错误的动作。选中页面后复现一次，读取相关请求与控制台。分别报告请求未发出、传输失败或收到错误响应，这三类现象对应不同后续检查。

查找慢加载背后的工作

提供页面、延迟现象和可复现环境，对该场景采集轨迹，识别相关资源或渲染工作。后续复测保持条件可比；轨迹文件变小或录制成功，本身都不是性能改善。

调查重复操作后的保留内存

启用内存工具后，提供反复开关同一面板等可重复交互，按官方内存 Skill 比较保留对象与可疑路径。需要区分临时分配，以及场景完成后仍可达、没有释放的对象。

检查扩展页面与 worker 行为

通过 --categoryExtensions 启用工具后，用 install_extension 加载获准的解压扩展并保存 ID。页面行为与后台 worker 分开检查；evaluate_script 通过 serviceWorkerId 而非 pageId 选择 worker。交付目标与错误，便于维护者复现。

准备可复现的诊断会话

以下首次流程使用完整 MCP 工具调查测试环境的保存故障，需要受支持浏览器、明确页面目标与确切复现输入。此次请求调查不需要额外启用扩展或内存工具。

受支持 Chrome 与 Node 环境
按当前版本准备运行环境及 Chrome 连接。仓库正式支持 Google Chrome 与 Chrome for Testing，不应将任意 Chromium 分支都视为受支持。
完整工具与匹配 Skill
读取官方 chrome-devtools Skill 并检查当前 MCP 工具列表。slim 模式的范围不同；启用可选类别后需按文档重启服务或客户端。
一项失败动作与测试数据
提供网址、必要测试账号、确切步骤、可见现象和预期结果。首次选择目标时排除无关标签页，复制请求证据时隐藏凭据。

诊断测试环境的保存失败

以下顺序将选择页面、复现与解释分开。结果可能是客户端问题、服务端响应或尚缺证据；有用交付物是缩小的原因范围和可重复下一步，而不是自动修改代码。

选择正确页面
调用 list_pages 取得目标 pageId，或通过 new_page 打开指定网址并保留返回值。必要时用 wait_for 等待已知表单文字，不假定列表第一项就是待查应用。
定位并复现失败动作
对该 pageId 使用 take_snapshot，取得当前字段和保存按钮的 uid。填入测试数据并在同一 pageId 点击，记录错误及出现时机；动作前表单发生重绘时先更新快照。
对照请求与控制台信息
用 list_network_requests 与 list_console_messages 检查本次交互，必要时通过 get_network_request 查看相关请求。没有请求可能涉及客户端校验或处理函数；错误响应需要查看状态与正文。时间关联可缩小问题，但不等于已证明根因。
交接证据与验证方法
返回复现步骤、目标页面、可见错误、受影响请求与相关控制台信息，并隐藏凭据。写明主要解释及仍未确认的部分，再提出修复后重复同一动作的检查，说明怎样的响应和页面状态才算恢复。