是否有“”的键盘快捷键;暂停动画”;Chrome开发工具中的功能?(F12）

Is there a keyboard shortcut for the "pause animation" feature in Chrome Developer Tools? (F12)

本文关键字：功能 开发工具 F12 暂停 键盘 快捷键 动画 是否 Chrome      更新时间：2023-09-26

Chrome的开发者工具中有一个漂亮的功能，可以暂停动画并控制其速度，但问题是它们是鼠标控制的按钮。有时我需要暂停动画，而不实际移动鼠标光标来检查悬停激活的动画中的内容，所以我不能真正使用暂停按钮。动画暂停按钮有没有键盘快捷键，这样我就不需要在做任何事情时将光标移开？

如前所述，没有键盘快捷键可以暂停动画，但我发现了下一个最好的方法：使用Ctrl+Shift+C（Mac中的Cmd+Shift+C）在光标位于具有悬停激活动画的元素上时启用检查。这并不能停止已经在运行的动画，但可以防止在检查时触发更多鼠标激活的动画，这可能足以检查元素。

否！Chrome DevTools没有这样的快捷方式。您可以在以下位置查看chrome DevTools快捷方式的完整列表：https://developer.chrome.com/docs/devtools/shortcuts/

更新的答案

您可以使用"；切换元素状态"；选项，或从控制台中的JavaScript，而不使用鼠标。此外，一旦您处于debugger;模式，检查就不应该触发事件。

老答案：

（调试动画的一般信息）

CSS3

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

JavaScript

您可以在每一帧或每两帧中创建断点。

相关文章：