DevTools 证据链

本节用 Performance Mark/Measure 建立可复现证据，再把同一步骤与 Network、Console 和 Performance 面板对应起来。

performance.mark('before')
requestAnimationFrame(() => {
  performance.mark('after')
  performance.measure('frame', 'before', 'after')
  console.log(performance.getEntriesByName('frame').at(-1).duration)
})

记录浏览器版本、视口和输入步骤；一次录制只能支持当前环境的观察，不能替代跨浏览器复测。

机制拆解

DevTools 证据链要把一个输入动作关联到 Console、Network、Performance 和最终 UI 结果。performance.mark/measure 只能提供当前页面的时序证据，不能替代版本、设备和视口记录。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

为一次按钮点击添加 mark/measure，在 Network 记录请求、Console 记录错误、Performance 记录长任务，并把四类证据按时间线写入复现表。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 为一次操作保存 Console、Network、Performance 三类证据并按时间排序。
2. 重复同一步骤只改变浏览器版本，标出结果差异。
3. 说明 mark/measure 能证明什么，不能证明什么。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。