Chrome 开发者工具中的 "pause animation" 功能是否有键盘快捷键? (F12)

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

Chrome 的开发人员工具中有一个很棒的功能,允许您暂停动画并控制它们的速度,但问题是它们是鼠标控制的按钮。有时我需要暂停动画而不实际移动鼠标光标来检查悬停激活动画中的某些内容,所以我不能真正使用暂停按钮。该动画暂停按钮是否有键盘快捷键,这样无论我在做什么,我都不需要将光标移开?

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

如前所述,没有用于暂停动画的键盘快捷键,但我发现了下一个最好的方法:使用 Ctrl+Shift+C(Mac 中的 Cmd+Shift+C)启用检查当光标位于具有悬停激活动画的元素上时。这不会停止 运行 动画,但会阻止在检查时进一步触发鼠标激活的动画,这可能足以检查一个元素。

更新答案

您可以使用“切换元素状态”选项或从控制台中的 JavaScript 触发动画,而无需使用鼠标。此外,一旦您处于 debugger; 模式,检查不应触发事件。


旧答案:

(关于调试动画的一般信息)

CSS3

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

JavaScript

您可以create breakpoints每一帧,或每几帧。