图层面板可帮助您了解网站的组成以及浏览器如何呈现内容。分析网站的 3D 图表，以发现渲染问题、修复滚动 bug 并优化动画。
概览
使用图层面板执行以下操作：
- 查看文档层。
- 检查文档图层。
- 设置 DOM 更改断点。
- 查看绘制性能分析器信息。
- 识别滚动缓慢的元素。
打开“图层”面板
如需打开图层面板，请按以下步骤操作：
- 打开开发者工具。
- 按以下键打开命令菜单：
- macOS：Command+Shift+P
- Windows、Linux、ChromeOS：Ctrl+Shift+P
- 开始输入
Layers，选择“显示图层”面板，然后按 Enter 键。
或者，在右上角，依次选择 more_vert 更多选项 > 更多工具 > “图层”面板。
此外，您还可以通过效果面板在图层标签页中查看录制的每个帧的图层。如需了解详情，请参阅查看图层信息。
查看文档层
Layers 面板最左侧的部分会以可展开的树形方式列出文档的所有已渲染图层。此树状结构会随着您浏览页面而更新。图层通过 CSS 选择器或数字（后跟图层的像素尺寸）进行标识。
将鼠标悬停在某个图层上，即可在网页和图表中将其突出显示。页面上会显示一条提示，其中包含以下信息：
- 图层的选择器。
- 图层的尺寸（以像素为单位）。
- 表示 CSS 网格或 flex 的图标（如果适用）。
检查文档图层
点击某个图层可在详细信息窗格中查看更多信息。
系统会显示以下信息，具体取决于图层：
- 大小
- 合成原因
- 内存估算值
- 绘制次数
- 缓慢滚动区域
- 粘性位置约束
该图显示了此网页的层叠和排列方式，包括位于视口之外的元素。
如需移动图表，请执行以下操作：
- 使用 WASD 键移动图表。按 W 向上平移，按 A 向左平移，按 S 向下平移，按 D 向右平移。
- 点击“平移模式”图标 drag_pan 或按 X 键并拖动，即可沿 X 轴和 Y 轴移动。
- 点击“旋转模式”图标 360 或按 V 键并拖动，以沿 Z 轴旋转。
- 点击“重置转换”图标 zoom_in_map 或按 0 将图表重置为原始位置。
- 按 Shift + + 或向上滚动鼠标滚轮即可放大。
- 按 Shift + - 或向下滚动鼠标滚轮即可缩小。
如需在“元素”面板中查看某个图层的相应 DOM 元素，请在图表或图层树中右键点击相应图层，然后点击在“元素”面板中显示。
此外，层面板会隐藏不托管或绘制内容的某些层。如需显示这些图层，请右键点击图层树，然后选择显示内部图层。
设置 DOM 更改断点
在 Layers（图层）面板中，您可以设置 DOM 更改断点。
如需设置 DOM 更改断点，请按以下步骤操作：
- 在图层树中右键点击某个图层。
- 将鼠标悬停在断点上，然后选择子树修改、属性修改或节点移除。
如需查找 DOM 更改断点的列表，请参阅以下内容：
- 元素 > DOM 断点标签页。
- 来源 > DOM 断点可收起部分。
如需详细了解断点类型，请参阅 DOM 更改断点类型。
查看绘制性能分析器信息
借助图层面板，您可以查看图层的详细绘制信息，并将网页内容渲染到 3D 图表中。
如需启用绘制性能分析器，请按以下步骤操作：
- 勾选操作栏中的check_box Paints 复选框。
- 从图层树中选择一个图层。
- 点击详细信息窗格的底部的绘制性能分析器。请注意，并非所有图层都提供此选项。
系统随即会打开 Profiler 标签页，其中包含绘制记录和一个表示绘制费用分布的直方图。
启用绘制后，系统还会将网页的大部分内容渲染到图表中。
识别滚动缓慢的元素
某些网站使用 JavaScript 检测元素上的滚动或触摸事件，但检测方式可能会对滚动速度产生负面影响。如需找出包含与滚动相关的事件监听器且可能会影响性能的层，请点击 check_box Slow scroll rects 复选框。
可能导致滚动速度缓慢的图层会以粉色突出显示。