firefox devtools 不直接暴露 opengl/vulkan 或 skia 指令，但可通过性能面板启用高级绘制检测、paint flashing 和 layers 面板间接观察绘制行为、重绘区域及图层合成信息。
Firefox DevTools 本身不直接暴露底层绘制指令（如 OpenGL/Vulkan 命令或 Skia 绘制操作），但可通过性能分析 + 高级绘制检测间接观察页面的绘制行为、触发时机和渲染流水线关键环节。
启用高级绘制调试信息
Firefox 提供了“绘制高亮”和“渲染统计”功能，帮助定位绘制相关问题：
- 打开 DevTools（Ctrl+Shift+I 或右键 → “检查元素”）
- 切换到 “性能” 面板（若不可见，点“更多工具”图标 ⋯）
- 点击右上角齿轮图标（⚙️）→ 勾选 “启用高级绘制检测”
- 开始录制（点击 ▶️），进行页面交互或刷新，再停止录制
录制完成后，在火焰图（Flame Chart）中可看到 “Paint” 和 “Composite” 类型的任务块，它们对应实际的绘制与合成阶段。悬停可查看帧时间、图层信息及是否发生全量重绘（如 “Full paint”）。
查看每帧绘制区域（视觉化高亮）
这能直观识别哪些区域被反复绘制：
- 在 DevTools 中按 Ctrl+Shift+P 打开命令菜单
- 输入并选择 “Toggle paint flashing”（或前往 设置 → 高级设置 → 启用“高亮重绘区域”）
- 启用后，页面中每次重绘的区域会短暂闪烁绿色（或自定义颜色）
该功能不显示指令本身，但能快速验证 CSS 动画、滚动、JS 触发的样式变更是否引起意外重绘。
结合“Layers”面板分析图层与绘制源头
Firefox 的 Layers 面板（需手动启用）可展示合成图层结构和绘制来源：
- 在地址栏输入 about:config，搜索
devtools.layers.enabled，设为 true - 重启 DevTools，刷新页面后，在 “更多工具” → “Layers” 中打开
- 展开图层树，查看每个图层的 “Painted” 状态、尺寸、内容来源（如 HTML 元素、Canvas、Video）
- 点击图层可高亮对应 DOM 节点，并在右侧显示其绘制缓存状态（如是否使用 GPU 加速、是否频繁重绘）
注意：无法查看原始图形 API 指令
不同于原生应用调试器（如 RenderDoc），Firefox DevTools 不提供类似 glDrawArrays 或 vkCmdDraw 的逐条图形指令日志。它聚焦于 Web 平台抽象层——即浏览器如何将 CSS/HTML/Canvas/WebGL 转译为最终像素。若需底层绘制指令，需借助系统级工具（如 Windows GPUView、Intel GPA）配合 Firefox 的 GPU 进程调试，但这已超出常规前端调试范畴。
