“层”面板:浏览您网站的各个层

Dale St. Marthe
Dale St. Marthe

Layers 面板可帮助您了解网站的组成以及浏览器如何呈现内容。分析网站的 3D 图表,以发现渲染问题、修复滚动 bug 并优化动画。

概览

使用图层面板执行以下操作:

  • 查看文档图层。
  • 检查文档图层。
  • 设置 DOM 更改断点。
  • 查看绘制性能分析器信息。
  • 识别滚动缓慢的元素。

打开“图层”面板

如需打开面板,请按以下步骤操作:

  1. 打开开发者工具
  2. 按以下键打开命令菜单
    • macOS:Command+Shift+P
    • Windows、Linux、ChromeOS:Ctrl+Shift+P 包含
  3. 开始输入 Layers,选择显示图层面板,然后按 Enter 键。

或者,选择右上角的 more_vert 更多选项 > 更多工具 > 图层面板

此外,您还可以通过 Performance 面板在 Layers 标签页中查看记录每一帧的图层。要了解详情,请参阅查看图层信息

查看文档图层

面板的最左侧部分会在可展开的树中列出文档的所有已呈现层。此树状结构会随着您浏览页面而更新。图层通过其 CSS 选择器或数字(后跟图层尺寸(以像素为单位))进行标识。

图层树。

将鼠标悬停在某个图层上,即可在网页和图表中突出显示该图层。页面上会显示一条提示,其中包含以下信息:

  • 图层的选择器。
  • 图层的尺寸(以像素为单位)。
  • 表示 CSS 网格或 Flex(相关)的图标。

关于 web.dev 横幅的提示。

检查文档图层

点击某个图层,即可在 Details 窗格中查看更多信息。

“详情”标签页。

根据不同的图层,系统会显示以下信息:

  • 大小
  • 合成原因
  • 内存估算
  • 绘制次数
  • 缓慢滚动区域
  • 粘性位置约束

该图显示了此网页的层叠和排列方式,包括位于视口之外的元素。

“图层”面板示意图。

如需移动图表,请执行以下操作:

  • 使用 WASD 移动图表。按 W 可向上平移,按 A 向左平移,按 S 向下平移,按 D 向右平移。
  • 点击“平移模式”图标 drag_pan 或按 X 键并拖动,即可沿 X 轴和 Y 轴移动。
  • 点击“旋转模式”图标 360 或按 V 键并拖动,即可沿 Z 轴旋转。
  • 点击“重置转换”zoom_in_map 或按 0 将图表重置为原始位置。
  • shift + + 或向上鼠标滚轮可放大视图。
  • shift + - 或鼠标滚轮向下键可缩小视图。

要在“元素”面板中查看图层对应的 DOM 元素,请右键点击图表或图层树中的相应层,然后点击在“元素”面板中显示

此外,面板会隐藏不托管或绘制内容的某些层。如需显示这些图层,请右键点击图层树,然后选择显示内部图层

设置 DOM 更改断点

Layers(图层)面板中,您可以设置 DOM 更改断点。

如需设置 DOM 更改断点,请按以下步骤操作:

  1. 右键点击图层树中的图层。
  2. 将鼠标悬停在划分点上,然后选择子树修改属性修改节点移除

如需查找 DOM 更改断点的列表,请参阅以下内容:

  • 元素 > DOM 断点标签页。
  • 来源 > DOM 断点可收起部分。

“来源”和“元素”面板中列出的断点。

如需详细了解断点的类型,请参阅 DOM 更改断点的类型

查看绘制性能分析器信息

通过面板,您可以查看有关层的详细绘制信息,并将网页内容渲染到 3D 图表中。

如需激活 Paint Profiler,请按以下步骤操作:

  1. 选中操作栏中的 check_box 画图复选框。
  2. 从图层树中选择一个图层。
  3. 点击详细信息窗格的底部的绘制性能分析器。请注意,并非所有图层都提供此选项。

系统会打开 Profiler 标签页,其中包含绘制记录和表示绘制费用分布的直方图。

“Profiler”标签页。

启用绘制后,系统还会将网页的大部分内容渲染到图表中。

识别慢滚动元素

某些网站使用 JavaScript 检测元素上的滚动或触摸事件,但检测方式可能会对滚动速度产生负面影响。要找出包含可能会降低性能的事件监听器的层,请选中 check_box 慢滚动矩形复选框。

图表中滚动缓慢的图层。

可能导致滚动速度缓慢的图层以粉红色突出显示。