Layers面板需手动启用：在DevTools设置→Experiments中勾选“Enable Layers panel”并重启，顶部才显示该标签；也可用Ctrl+Shift+P输入“Show Layers”临时调出。
Chrome DevTools 的 Layers 面板不直接显示“HTML 中的图层”，它展示的是浏览器实际创建的 GPU 合成层（composited layers），这些层由渲染引擎根据样式、属性和布局动态生成，和 DOM 结构不一一对应。想看到真实合成结构，必须手动启用并配合正确调试路径。
Layers 面板怎么打开（不是默认可见）
Layers 面板在 Chrome 中属于实验性功能，需主动开启：打开 DevTools（Ctrl+Shift+I 或 Cmd+Option+I），点击右上角「⋯」→ Settings → 左侧选 Experiments → 搜索 Layers → 勾选 Enable Layers panel → 关闭并重新打开 DevTools。此时顶部标签栏末尾才会出现 Layers 标签。
若仍不显示，可尝试命令菜单：Ctrl+Shift+P → 输入 Show Layers → 回车。该方式不依赖面板是否已启用，但仅临时调出。
Layer borders 绿色边框才是实时反馈关键
单纯打开 Layers 面板只能看到静态快照，而真正用于定位问题的是 Layer borders 可视化叠加层。操作路径：DevTools → 「⋯」→ More Tools → Rendering → 勾选 Layer borders（同时建议勾选 Paint flashing 和 FPS meter）。
立即学习“前端免费学习笔记（深入）”；
- 页面上出现半透明绿色边框，每一块代表一个独立合成层
- 边框越密集、越细碎，说明图层分裂越严重（比如长列表每项都带
will-change: transform） - 没有绿框 ≠ 没有动画，而是该元素未被提升为合成层，所有绘制仍在主线程完成
为什么点了 3D view 却没反应或看不到堆叠
Layers 面板左上角的立方体图标是 3D view，但它不是三维建模工具，而是伪 3D 堆叠预览：只有当前存在多个合成层时，该视图才有效；若整个页面只有一个合成层（例如全站禁用 transform/opacity/will-change），3D 视图窗口会为空或仅显示单层。
常见失效原因：
- 页面尚未触发任何合成条件（如没加
transform，也没 JS 动态写style.transform） - 所有合成层被父级
overflow: hidden或clip-path截断，导致无法形成独立层 - 启用了
Layer borders但没刷新页面，旧样式未重绘，新层未生成
Layers 面板里看到的 “Memory” 不是 GPU 显存
Layers 面板中每行的 Memory 列显示的是 CPU 端图层元数据占用（单位 KB），不是 GPU 显存用量。一个 div 显示 Memory: 2.1 MB 并不意味着它占了 2MB 显存——这通常是纹理上传失败、回退到软件光栅化或图层内容异常复杂（如含大量 SVG 或 Canvas）的信号。
真要看显存压力，得用外部工具：
- 按
Shift+Esc打开 Chrome 任务管理器，盯住GPU Process行的内存列 - 访问
chrome://gpu，检查Graphics Feature Status是否出现disabled_software_fallback - Performance 面板录制时勾选
Memory，但注意它默认不显示 GPU Memory，需通过chrome://flags/#enable-gpu-memory-buffer-video-frames启用（仅限调试版）
Layers 面板真正有用的是 Reasons for compositing 字段——它告诉你这个层为什么存在，而这个“为什么”，往往就是 JS 代码里那行看似无害的 el.style.left = '100px'。
