如何调试Javascript进程和动画？

Question

有很多调试JavaScript代码的工具(比如FireBug、console)，但是是否有一个用于调试进程的工具？这可能需要监视资源(例如CPU)的使用情况，以查找进程中的瓶颈。

我创建Javascript动画来移动元素(在一个更简单的案例打开/关闭菜单中)，但是移动现在是平滑的。不同的因素会导致过载，例如，沉重的CSS3梯度。但是如何检测速率限制过程呢？

这确实是大多数网站的问题。打开网页时，javascript进程的重载会终止页面加载。大多数动画/菜单操作都被破坏了。

当JavaScript动画不能顺利运行时，如何调试问题？

或者一个更普遍的问题，如何监控运行JS进程的资源使用情况，从而使网页更轻松(在资源有限的计算机上负载更快)？

Answer 1

我会使用Chrome中的时间线->帧。保罗·爱尔兰对此有很多很好的讨论，这里有一个https://www.youtube.com/watch?v=Vp524yo0p44

另外，当动画不使用setTimeout/setInterval时，精度还不够好。相反，请使用requestAnimationFrame。有关requestAnimationFrame的更多信息可以在这里找到。http://paulirish.com/2011/requestanimationframe-for-smart-animating/

编辑:保罗的这篇演讲对于浏览器：https://www.youtube.com/watch?v=MllBwuHbWMY中的速度和调试速度也很有趣，下面是最近讨论的2D转换与绝对定位：国税局

Answer 2

不同的机器=>不同的性能=>不同的瓶颈

如果动画不能顺利运行，我尝试降低图形或动画本身。谁说用户和你一样使用功能强大的机器？所以他们可能会比你更早解决问题。

但我仍然建议使用过程资源管理器，因为它可以单独显示特定进程的负载。一般来说，与Windows提供的默认任务管理器相比，它是一个更有洞察力的工具。