Chrome 开发者工具中的“暂停动画”功能是不是有键盘快捷键？ (F12)

Posted 2023-03-06

【中文标题】Chrome 开发者工具中的“暂停动画”功能是不是有键盘快捷键？ (F12)

【英文标题】：Is there a keyboard shortcut for the "pause animation" feature in Chrome Developer Tools? (F12)Chrome 开发者工具中的“暂停动画”功能是否有键盘快捷键？ (F12)

【发布时间】：2015-05-08 01:48:05

【问题描述】：

Chrome 的开发者工具中有一个很棒的功能，可以让您暂停动画并控制其速度，但问题是它们是鼠标控制的按钮。有时我需要在不实际移动鼠标光标的情况下暂停动画以检查悬停激活动画中的某些内容，因此我不能真正使用暂停按钮。该动画暂停按钮是否有键盘快捷键，所以我不需要将光标从我正在做的任何事情上移开？

【问题讨论】：

为什么投反对票？这绝对是一个面向开发人员的问题。只有开发者使用“Chrome 开发者工具”。开发人员比其他任何人都更有可能知道这个问题的答案！那么我还应该在哪里发布这个问题呢？

暂停动画功能在哪里？

在开发者工具中，在“样式”、“计算”、“事件监听器”等选项卡下，您可以在右侧看到一个圆圈内的播放按钮。如果单击它，将出现一个滑块，您可以使用它设置动画速度，并且在该滑块的左侧，有一个暂停按钮。那是我想使用的按钮，但实际上没有使用鼠标，因为我想暂停悬停激活的动画，如果我将鼠标光标移出页面，我想暂停的动画将不再可见。这就是为什么我需要一个键盘快捷键。

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

更新答案

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

---

旧答案：

（关于调试动画的一般信息）

CSS3

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

JavaScript

你可以create breakpoints每一帧，或者每两帧。

【讨论】：

投了反对票，因为 a) CSS3 动画可以用动画检查器暂停，b) 暂停 JavaScript 调试器对 CSS 动画没有影响，c) 这些点都没有回答关于触发不使用鼠标暂停动画功能。

谢谢@Hamish！更新