firefox devtools 不提供内置的交互过程帧级时间轴录制与火焰图分析功能，但可通过 performance 面板录制交互、调试器设置事件断点、网络面板监控请求及手动注入 performance.mark() 等组合方式实现性能分析。

Firefox DevTools 本身不提供类似 Chrome 或 Edge 的“性能”面板中那种交互过程的帧级时间轴录制与火焰图分析功能。它没有内置的、一键启动并可视化页面运行时交互（如点击、滚动、输入）全过程的“交互分析记录”视图。

但你可以通过组合使用 Firefox DevTools 中的几个关键工具，间接实现对用户交互行为的性能分析和问题定位：

查看页面交互期间的性能表现

• 打开 DevTools：按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（macOS），或右键 → “检查元素”
• 切换到 “性能”面板（注意：Firefox 的该面板叫 Performance，不是 Profiler；旧版曾叫 Timeline，新版已统一为 Performance）
• 点击左上角的 ● 录制按钮（红色圆点），开始捕获
• 在页面上执行目标交互（例如点击按钮、展开菜单、滚动列表）
• 再次点击 ● 按钮停止录制
• DevTools 会生成一条时间线，显示：
  • FPS 曲线（帧率波动）
  • 主线程活动（JavaScript 执行、样式计算、布局、绘制、合成）
  • 各阶段耗时堆叠图（可放大查看具体函数调用栈）
  • 若勾选了“JS Profiler”，还能看到 JavaScript 函数的执行耗时与调用关系

⚠️ 注意：Firefox 的 Performance 面板默认不捕获屏幕截图（不像 Edge/Chrome 可勾选“Screenshots”），所以无法逐帧回放视觉变化，但能精准定位卡顿发生在哪个阶段（比如 layout 耗时突增，说明重排严重）。

Audiobox

Audiobox是一款AI音频处理工具，Meta推出的免费AI语音和声音生成模型。

下载

追踪特定交互事件的源头与调用链

• 在 “调试器”面板 中设置断点：
  • 展开右侧“事件监听器断点”，勾选 click、input、scroll 等常用事件
  • 触发交互后，代码会在绑定事件处理函数处暂停，方便查看调用栈、作用域和执行路径
• 使用 “网络”面板 配合交互：
  • 开启录制，再操作页面（如提交表单、加载更多）
  • 查看是否触发了预期请求、响应是否延迟、是否有重复或冗余请求

补充方案：用“录制器”替代（需手动启用）

Firefox 当前未内置类似 Edge 的 Recorder 工具（即自动录制 + 重放用户流 + 性能测量一体化功能）。若需自动化交互分析，可考虑：

• 使用第三方工具（如 Puppeteer + Firefox）编写脚本模拟操作，并结合 performance.mark() / performance.measure() 手动打点
• 在页面中主动注入性能标记，再通过 “内存”或“性能”面板的“Markers”轨道 查看自定义事件区间

不复杂但容易忽略