Layers 面板可帮助您了解网站的组成以及浏览器如何呈现内容。分析网站的 3D 图表，以发现渲染问题、修复滚动 bug 并优化动画。
概览
使用图层面板执行以下操作：
- 查看文档图层。
- 检查文档图层。
- 设置 DOM 更改断点。
- 查看绘制性能分析器信息。
- 识别滚动缓慢的元素。
打开“图层”面板
如需打开层面板，请按以下步骤操作：
- 打开开发者工具。
- 按以下键打开命令菜单：
- macOS：Command+Shift+P
- Windows、Linux、ChromeOS：Ctrl+Shift+P
- 开始输入
Layers，选择显示图层面板，然后按 Enter 键。
或者，选择右上角的 more_vert 更多选项 > 更多工具 > 图层面板。
此外，您还可以通过 Performance 面板在 Layers 标签页中查看记录每一帧的图层。要了解详情，请参阅查看图层信息。
查看文档图层
层面板的最左侧部分会在可展开的树中列出文档的所有已呈现层。此树状结构会随着您浏览页面而更新。图层通过其 CSS 选择器或数字（后跟图层尺寸（以像素为单位））进行标识。
将鼠标悬停在某个图层上，即可在网页和图表中突出显示该图层。页面上会显示一条提示，其中包含以下信息：
- 图层的选择器。
- 图层的尺寸（以像素为单位）。
- 表示 CSS 网格或 Flex（相关）的图标。
检查文档图层
点击某个图层，即可在 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 更改断点，请按以下步骤操作：
- 右键点击图层树中的图层。
- 将鼠标悬停在划分点上，然后选择子树修改、属性修改或节点移除。
如需查找 DOM 更改断点的列表，请参阅以下内容：
- 元素 > DOM 断点标签页。
- 来源 > DOM 断点可收起部分。
如需详细了解断点的类型，请参阅 DOM 更改断点的类型。
查看绘制性能分析器信息
通过层面板，您可以查看有关层的详细绘制信息，并将网页内容渲染到 3D 图表中。
如需激活 Paint Profiler，请按以下步骤操作：
- 选中操作栏中的 check_box 画图复选框。
- 从图层树中选择一个图层。
- 点击详细信息窗格的底部的绘制性能分析器。请注意，并非所有图层都提供此选项。
系统会打开 Profiler 标签页，其中包含绘制记录和表示绘制费用分布的直方图。
启用绘制后，系统还会将网页的大部分内容渲染到图表中。
识别慢滚动元素
某些网站使用 JavaScript 检测元素上的滚动或触摸事件，但检测方式可能会对滚动速度产生负面影响。要找出包含可能会降低性能的事件监听器的层，请选中 check_box 慢滚动矩形复选框。
可能导致滚动速度缓慢的图层以粉红色突出显示。