firefox devtools 通过性能面板的layout（橙色）和paint（绿色）块识别回流与重绘：layout后必跟paint为回流+重绘，仅paint为纯重绘；非法嵌套可通过检查器观察意外文本节点或div在p内、断点监听subtree modifications及getcomputedstyle验证。
Firefox DevTools 本身不直接标注“回流”或“重绘”事件，但可通过组合工具精准识别其发生时机与根源。关键不是找标签，而是观察渲染流水线中布局（Layout）和绘制（Paint）阶段的异常活动。
用性能面板捕获并识别回流/重绘
- 打开 Firefox DevTools：右键页面 → “检查元素”，或按
Ctrl+Shift+I（Windows/Linux） /Cmd+Opt+I（macOS） - 切换到 “性能” 面板（若未显示，点击右上角“⋯” → “更多工具” → “性能”）
- 点击左上角 “开始录制”（圆点按钮），操作页面（如滚动、点击、输入），再点击“停止录制”
- 在火焰图（Flame Chart）中，横向时间轴上查找高亮的 “Layout”（橙色块）和 “Paint”（绿色块）
- 出现 Layout → 必然伴随 Paint → 这就是一次回流+重绘
- 只有 Paint 没有 Layout → 属于纯重绘（如改 background-color）
- 展开 Layout 块，可看到触发它的 JS 调用栈或样式计算源头（例如某次
offsetHeight读取）
定位非法嵌套引发的隐性回流
多级非法嵌套（如 <p></p>
<div>...</div>
- 切换到 “检查器”（Inspector）面板
- 找到疑似区域（如
<article></article>或<nav></nav>），展开其子节点 - 观察是否出现意外的文本节点（
#text）、或<div> 出现在 <code><p></p>内部 —— 这说明浏览器已拆解并重建结构 - 右键该父元素 → “Break on → subtree modifications”，再交互（如 hover、resize），若断点停在上级容器（如
<main></main>），说明重排已向上扩散
辅助验证：强制触发并比对
在控制台（Console）执行以下命令，辅助判断是否因结构问题导致样式继承断裂：
getComputedStyle(document.body).display // 应为 'block'，若返回异常值，结合布局错乱可反推嵌套问题
同时观察“布局”面板（Layout tab） 中的盒模型是否突变（如 margin/collapse 异常），这常是非法嵌套破坏 BFC 或匿名块生成的信号。
不复杂但容易忽略
