我们最近在做基于 CSS 的动画（丢帧）时遇到了一个 Firefox 特有的性能问题，在 Chrome 中我们可以使用 Timeline 选项卡轻松调试，但是有没有适用于 Firefox 的类似工具？最好同时用于 Firefox 桌面版和移动版，因为这个问题在我们的 Android 设备上最为严重。
【问题讨论】：
标签： android css google-chrome firefox firefox-developer-tools
从 Firefox 34 开始，有一个 profiler in the FirefoxDevTools:
Profiler 可让您记录 JavaScript 函数调用。您可以在工具箱的“性能”选项卡中找到分析器（确保您在设置中启用了“性能”复选框）。
创建记录后，您会看到一个帧率图和一个条形图，显示每个记录样本上发生的活动类型（网络、JIT、GC、事件、样式、图形、存储）。您还可以在设置中启用“Gecko 平台数据”，以便在 JavaScript 函数调用堆栈中获得更多关于渲染引擎花费时间在做什么的信息。
由于您正在调试与 CSS 相关的性能瓶颈，因此您主要对样式和图形操作感兴趣。 分析器有望帮助您缩小 JavaScript 调用触发这些问题的范围。 帧率图对您也应该很有用。
分析器使用 devtools 协议，因此也适用于远程设备。
话虽如此，像 Chrome 的时间线这样的工具会随着时间的推移显示重新样式、重排、绘画、合成操作，这将更适合您的用例。我们实际上正在开发这个工具，并且在 Firefox Nightly 中有一个 alpha 版本（现在是 Firefox 35）：
【讨论】：