Chrome DevTools MCP：真实证据、明确范围与可验证浏览器工作
评估浏览器助手性能：分清本地追踪、真实用户数据与图片大小
设计受控浏览器试验，区分工具延迟、追踪证据、CrUX 数据和截图传输成本。
评估浏览器助手性能：分清本地追踪、真实用户数据与图片大小知识学习CN编辑简报更新 2026-09-14
你将学会
- 比较前先固定浏览场景
- 真实用户体验与本地追踪是不同证据
- 截图字节与阅读成本并不相同
开始前需要
- 了解浏览器控制台和网络基本概念
- 理解 CLI 参数和本地客户端配置
规划有范围限制的浏览器排查，分清入口默认值、工具成功与端到端验收。
先看结论
- 比较相同的受控浏览场景。
- CrUX 现场数据与本地追踪是不同数据集。
- 图片文件变小不等于令牌同比下降。
比较前先固定浏览场景
记录页面版本、视口、设备、网络条件、浏览器状态和准确交互。全新配置与预热登录会话可能做不同工作；在变化条件下重复追踪，无法独立解释某次代码修改的影响。
分开记录工具延迟、浏览器启动、导航、采集和助手解释。README 的使用统计包含操作指标，但工具调用成功率不是用户体验基准。本系列没有采集真实追踪或网站速度结果。
真实用户体验与本地追踪是不同证据
README 说明性能工具可能向 CrUX 发送追踪中的 URL，以获取真实用户体验背景。本地追踪描述该次运行，现场数据对应不同用户群体和观察窗口，不能相互替代，也不能说成同一次实验室测量。
如果 URL 敏感或该请求超出任务，应明确关闭性能 CrUX 共享。这不会自动关闭独立的使用统计或 npm 更新检查。解释分析结果时，要记录启用了哪些数据来源。
截图字节与阅读成本并不相同
配置提供格式、质量与最大尺寸选项。压缩改变传输大小，降低尺寸改变视觉信息，并可能以不同方式影响模型图像处理。未测实际客户端与模型流程前，不要声称固定令牌节省比例。
选择足以回答问题的最小观察。文本快照适合标签，针对性截图适合布局；保留辨认缺陷所需分辨率，诚实报告未知成本。本次没有测量提速或费用下降。
如何选择
| 比较维度 | 方案 A | 方案 B |
|---|---|---|
| Best when | You need predictable behavior and easy auditing | You need adaptive optimization and have reliable telemetry |
| Main risk | May leave performance on the table | Can become difficult to explain or debug |
实施步骤
- 1
记录场景和浏览器条件。
- 2
分开测启动、工具和分析时间。
- 3
标识本地与现场证据。
- 4
控制观察体积但保留必要细节。
可复制示例
json
{
"试验计划": true,
"页面版本": null,
"视口": null,
"本地追踪毫秒": null,
"启用现场数据": false,
"工具延迟毫秒": null,
"图片字节": null,
"模型成本": null,
"已执行基准": false
}常见问题
CrUX 就是刚采集的本地追踪吗？
不是，它提供现场背景，不是同一次本地运行。
JPEG 字节减半能保证图像令牌减半吗？
不能，还取决于尺寸及客户端和模型的处理流程。
资料来源
- Chrome DevTools MCP / README.md来源核查 2026-09-14
- Chrome DevTools MCP / docs/configuration.md来源核查 2026-09-14