Chrome DevTools 的 Layers 面板（现整合进 Rendering 面板，可通过命令菜单输入“Layers”打开）用于可视化合成层、排查 z-index 失效、遮挡异常及性能问题；它显示图层树与3D堆叠结构，支持点击高亮对应DOM元素，并可结合Layer borders、Paint flashing等工具交叉验证合成状态。
Chrome DevTools 的 Layer 面板（现整合进 Layers 标签页，位于 Rendering 面板中）主要用于可视化页面的合成层（compositing layers）、绘制边界和 GPU 加速区域，对排查 z-index 失效、元素未按预期提升为独立图层、闪烁/卡顿或遮挡异常等“层级问题”非常有效。
确认是否启用了 Layers 查看功能
新版 Chrome（110+）已将 Layers 功能移至 Rendering 面板 → 勾选 Show layer borders 或 Paint flashing 等选项；若需深度分析图层结构，需手动打开 Layers 标签页：
- 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）打开命令菜单
- 输入 Layers，选择 Layers 面板并打开
- 刷新页面后，左侧会显示所有合成层树形结构，右侧呈现 3D 视图与图层属性
识别哪些元素被提升为独立图层
不是所有元素都会自动成为独立合成层。Chrome 只对满足特定条件（如含 transform、opacity < 1、will-change、video/canvas、3D 变换等）的元素创建图层。Layer 面板能直观展示：
- 每个图层对应的 DOM 节点（点击图层可高亮对应元素）
- 图层尺寸、位置、缩放比例、是否启用 GPU 加速（GPU rasterized 标识）
- 是否有隐式合成（implicit compositing）——即因与其他图层重叠而被动提升，这常导致意料外的 z-order 行为
若发现某个本应“浮在最上”的弹窗没被单独图层化，检查它是否缺少 transform: translateZ(0) 或 will-change: transform 等触发条件。
排查 z-index 不生效或遮挡异常
z-index 生效的前提是元素处于同一 stacking context。Layer 面板本身不直接显示 stacking context，但它能暴露更底层的问题：
- 观察两个元素是否在不同合成层中：若 A 在 layer-1、B 在 layer-2，且 layer-2 物理位置在 layer-1 上方（3D 视图可见），则无论 z-index 多大，A 都会被 B 遮挡
- 注意“Overlapping layers”警告：当多个图层在同一屏幕区域重叠时，DevTools 会标红提示，这往往是性能隐患，也可能引发渲染顺序错乱
- 右键图层 → Reveal in Elements panel，快速定位到 DOM 节点，再检查其父级是否意外创建了新的 stacking context（如 opacity < 1、transform 不为 none、filter 等）
结合其他 Rendering 工具交叉验证
Layer 面板需配合其他渲染调试工具才能准确定位问题：
- 开启 Paint flashing：绿色闪动表示重绘区域，频繁闪动可能说明图层拆分不合理（例如滚动时整个页面重绘）
- 开启 FPS meter：观察图层变化时帧率是否骤降，判断是否因过多图层或频繁合成导致性能下降
- 使用 Rendering > Show composited layer borders：彩色边框直观显示哪些区域被独立图层化，比 Layers 面板更轻量、适合日常扫描
真正影响遮挡逻辑的，往往是 stacking context 和图层合成顺序的叠加结果，单看 z-index 容易误判。Layer 面板的价值，就在于把抽象的“层”变成可看见、可点击、可对比的实体。
