Question

var lastTime;

function init(){
    lastTime = Date.now();
    main();
}

function main(){
    var now = Date.now();
    var dt = now - lastTime;
    update(dt) // main loop
    lastTime = now;
    requestAnimationFrame(main);
}

我正在使用上面的代码在画布上构建一些动画。预计dt大约为0.016，因为这是1秒/（60帧/秒），而我的代码逻辑基于这种期望（不一定准确）。但每当我设置断点并暂停代码时，dt与预期相比将非常大，这使我的代码无法正常工作。总而言之，我的代码是基于时间的，但暂停它会破坏这个基础，尽管我必须暂停调试它。真是一个两难的境地！我该怎么做才能解决这个问题？

Answer 1

我通过Chrome的时间轴调试使用requestAnimationFrame的动画非常成功。

你基本上指示时间轴开始录制，当你的动画完成后你就停止它并分析它收集的数据。

还有一个 Frames 模式，可以显示渲染性能。

对于每个记录的事件，您都有关于消耗的资源，堆栈跟踪等信息。

在处理动画和性能问题时，值得阅读Timeline的文档：

“时间轴”面板可让您记录和分析所有活动   你的应用程序运行。这是最好的起点   调查应用程序中的感知性能问题。

https://developer.chrome.com/devtools/docs/timeline

如何有效地调试动画代码

1 个答案: