网页检查器参考时间轴标签页
时间轴标签页包含网页检查器提供的所有性能分析和自省工具,这些工具被组织成不同的时间轴,每个时间轴都有各自关注的领域和专用界面。
时间轴录制可以通过空格键
。当前时间轴录制可以通过⌘
K
。
停止后恢复会将任何新录制的活动添加到先前活动的时间轴录制末尾。按住 Shift 键点击⇧
空格键
将开始全新的时间轴录制,与所有其他现有时间轴录制完全分离。可以通过主内容区域顶部的面包屑导航来更改活动的时间轴录制。
如果时间轴标签页当前处于活动状态,则当被检查页面导航时,会自动创建一个新的时间轴录制。勾选“页面加载后停止录制”复选框时,此导航时间轴录制将自动停止
- 在2秒内没有可录制活动后
- 在
load
事件触发后10秒 - 在时间轴录制开始后90秒
时间轴录制也可以通过console.profile
和console.profileEnd
开始和停止,从而让代码本身对录制哪些活动拥有更细粒度的控制。
注意:JIT 去优化、断点、代码覆盖率、类型分析器以及其他调试功能在时间轴录制期间会暂时禁用,以最大限度地提高被检查页面的性能,从而衡量真实的性能。
选择范围
概览图的内容可以超出网页检查器窗口的边界。在概览图中垂直滚动将缩放可见时间范围,调整用于可视化每秒的像素数量比例。在概览图中任意位置点击并拖动将调整选定的时间范围,从而影响显示哪些记录,有效地过滤掉所有其他记录。
根据概览图的比例,多个记录可能会在视觉上合并成一个记录。
点击并拖动现有选定时间范围的顶部将水平移动该时间范围,而不会调整其总时长。点击并拖动现有选择顶部的起始/结束句柄将扩展或折叠该时间范围,而不会调整另一个起始/结束句柄。
点击概览图中的任何记录将在关联的时间轴中选择该记录。如果该记录在当前选择范围之外,则会调整选择范围以包含该记录,并在前后添加一些额外的时间填充。
在概览图中任意位置双击将清除当前选择。
事件视图
事件视图将时间轴录制期间捕获的数据绘制到组合概览图中,形成一系列记录,以便快速扫描以了解何时有活动发生。
除了记录条之外,在时间轴录制期间,概览图中还会出现不同的垂直线标记,以指示重要或值得注意的事件。
- 活动时间轴录制的当前时间
- 在被检查页面中分派的
load
事件 - 在被检查页面中分派的
DOMContentLoaded
事件 - 调用了
console.timeStamp
- 扫描线,将所选时间轴中的时间投影到概览图上
如果勾选了“按资源分组”复选框,记录将按源资源或活动类型进行组织,而不是在概览表中每条记录占用一行。
事件视图包含许多不同的时间轴,它们将相似的活动分组在一起。通过点击时间轴列表上方的“编辑”按钮并取消勾选相应时间轴旁边的复选框,可以禁用时间轴。
每个时间轴的禁用状态在网页检查器会话之间是保留的。
选择这些时间轴中的任何一个都将显示其所代表的活动类型的更具体和详细的视图。
- 屏幕截图时间轴在时间轴录制期间,每次合成后捕获视口截图,并显示来自
console.screenshot
的所有图像。 - 网络请求时间轴与网络标签页类似,因为它列出了时间轴录制期间发生的所有网络活动。
- 布局与渲染时间轴列出了时间轴录制期间发生的每次样式失效或重新计算、布局、合成和绘制,包括每次操作的大小信息以及指向触发它的JavaScript代码的链接(如果适用)。
- 媒体与动画时间轴列出了所有媒体元素(例如
<video>
)、CSS动画和CSS过渡,并绘制了时间轴录制期间各自随时间分派的各种DOM事件。此时间轴最初是禁用的,因为它可能会在时间轴录制期间影响被检查页面的性能。
- JavaScript 与事件时间轴采样JavaScript活动以生成调用树,这些调用树可以按包含活动的脚本的顺序入口(例如脚本评估、事件分派、
setTimeout
等)组织,也可以作为时间无关的组合调用树。 - CPU时间轴绘制了时间轴录制期间与被检查页面相关的所有线程的CPU使用情况,并列出了时间轴录制期间执行的事件监听器、计时器、网络活动、脚本入口等数量和类型的额外统计信息。
- 内存时间轴绘制了根据时间轴录制期间内存使用方式对被检查页面内存使用情况进行的细分。
此时间轴最初是禁用的,因为它可能会在时间轴录制期间影响被检查页面的性能。
- JavaScript 分配时间轴列出了自网页检查器打开以来捕获的所有JavaScript 堆快照,并包含用于比较堆快照中对象的存在情况,以及可视化从任意给定对象到根全局对象的最短路径的工具。
JavaScript 堆快照会在时间轴录制开始时、时间轴录制结束前以及时间轴录制期间每隔10秒自动捕获,但也可以通过点击随时手动捕获
[拍摄快照]或通过console.takeHeapSnapshot
。此时间轴最初是禁用的,因为它可能会在时间轴录制期间影响被检查页面的性能。
帧视图
帧视图本质上是一种不同的方式来组织录制期间捕获的数据。它不是根据活动的“类型”(即事件视图中的各种时间轴)来组织数据,而是简单地根据活动发生在哪个渲染帧中来分组活动。
在图表区域,X轴表示渲染帧的顺序列表,而Y轴表示该帧执行所需的时间(越低或越少越好)。30 FPS 和 60 FPS 的水平线是时间的通用指标(分别约为33毫秒和16毫秒),以及如果所有渲染帧都花费那么多时间执行时,可能实现的总体每秒帧数。
共享
完整的录制可以通过点击⌘
S
。先前导出的录制可以稍后通过点击导入