如何在Google Chrome中启用DevTools Time Steps功能？

方案1：使用Performance面板逐帧调试 #

• 打开Chrome DevTools：按下F12或Ctrl+Shift+I（Windows/Linux）/Cmd+Opt+I（Mac）
• 切换到Performance面板
• 点击录制按钮（圆形红点）捕获页面性能数据，完成后点击停止
• 在录制结果的时间轴上，定位到目标调试时间段，点击时间轴下方的逐帧步进按钮（左右箭头图标），即可逐帧查看页面状态，实现类Time Steps的时间步进效果

方案2：启用DevTools实验性功能（贴近原生定制体验） #

• 在DevTools中按下F1打开设置面板
• 切换到Experiments标签页
• 查找并勾选以下相关实验项：
  • "Animation inspector: slow animations"（慢动作调试动画）
  • "Performance: advanced timeline features"（高级时间轴功能）
• 重启DevTools后，在Performance或Animations面板可获得更精细的时间控制能力

方案3：通过Animations面板控制动画进度 #

• 打开DevTools的Animations面板（若未找到，点击右上角三点→More Tools→Animations）
• 页面中的动画会展示在面板内，选中目标动画后，拖动时间轴滑块或使用面板底部的步进按钮，即可逐段控制动画播放进度，实现时间步进调试

注意：Chrome原生没有直接命名为"Time Steps"的功能，Yandex的该功能是基于Chrome内核做的定制扩展。上述方案可实现等价的时间步进调试效果。

内容的提问来源于stack exchange，提问作者timer