Javascript 如何有效地调试动画代码

我正在使用上面的代码在画布上构建一些动画

dt

预计约为0.016，因为这是1秒/（60帧/秒），我的代码逻辑某种程度上基于这一预期（不一定准确）。但是每次我设置断点并暂停代码时，

dt

将比预期的要大，这使得我的代码无法正常工作。总之，我的代码是以时间为基础的，但是暂停它会破坏这个基础，尽管我必须暂停调试它。真是进退两难！我能做些什么来处理这个问题？

我已经通过Chrome的时间线成功调试了使用requestAnimationFrame的动画

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

还有一个显示渲染性能的帧模式

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

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

“时间轴”面板允许您记录和分析中的所有活动 您的应用程序运行时。这是最好的开始 调查应用程序中感知到的性能问题

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