javascript - 如何有效调试动画代码

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);
}

我正在使用上面的代码在 Canvas 上构建一些动画。 dt 预计约为 0.016，因为这是 1 秒/(60 帧/秒)，而我的代码逻辑在某种程度上基于此期望(不一定准确)。但是每次我设置断点并暂停代码时，dt 都会比预期的大，这使得我的代码无法正常工作。总之，我的代码是基于时间的，但是暂停它会破坏这个基础，尽管我必须暂停来调试它。多么两难啊!我可以采取什么措施来解决这个问题？

Answer 1

我通过 Chrome 的时间轴调试使用 requestAnimationFrame 的动画取得了巨大成功。

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

还有一个Frames模式来显示渲染性能。

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

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

The Timeline panel lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application.

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