使用 Chrome Devtools 调试 CSS 动画

Posted 2023-03-07

技术标签:

【中文标题】使用 Chrome Devtools 调试 CSS 动画【英文标题】：Debug CSS animation with Chrome Devtools 【发布时间】：2014-12-16 16:30:24 【问题描述】：

是否可以查看或调试单个元素在transition-css 动画中执行的步骤？我正在使用 Chrome 开发工具，但我对它很陌生。我用谷歌搜索并从时间轴上看到了一些东西，但我没有找到一步一步的东西。

我的动画从 0% 开始，一直到 100%，但在 50% 附近似乎有些奇怪，尽管没有声明 50% 步骤。这就是为什么我想查看正在发生的事情。

【问题讨论】：

与其问“给我看看 google chrome 的开发工具”怎么样，不如来看看有问题的动画。知道为什么会这样吗？后者可能更有效地解决问题:) 好吧，我相信你们能够很快解决这个问题，但我想了解是否以及如何调试 CSS 动画，有点像一步一步，只是为了自己学吧。这样我就可以解决自己的问题:-) 给一个人一条鱼，你喂他一天；教一个人钓鱼，你养他一辈子。 ;-) 我有一个给你 - if you build a man a fire, he'll be warm for a night. set a man on fire, and he'll be warm for the rest of his life. 关键是，如果我们现在能指出“错误”，那么你将来出错的可能性就会降低！ :) 呵呵。好吧，谢谢，但实际上我几分钟前自己才找到解决方案。它与重新计算中心（边距：自动）和调整元素大小有关。因此，通过一些猜测、反复试验，我设法解决了这个问题。如果我知道如何调试这些东西会更好。如果有可能，我真的很想知道......不要自己找到...... 【参考方案1】：

上次更新时间为 2018 年 1 月 11 日。

The Chrome DevTools Animation Inspector 有两个主要用途。

贝塞尔曲线编辑目前不支持和关键帧编辑。

例如无法在关键帧中修改 CSS 2D 变换的 scale 方法的值。尝试运行下面给出的 sn-p：

.animates 
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-iteration-count: infinite;

.wrapper 
  position: relative;
  margin-top: 10px;

.btn-overlay 
  animation-name:grow;
  -webkit-animation-name:grow;
  position: absolute;
  width: 50%;
  top: 0;
  left: 27%;

@keyframes grow 
  0%
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    left: 27%;
  
  80% 
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    left: 27%;
  	
  90% 
    transform: scale(1.04);
    -moz-transform: scale(1.04);
    -webkit-transform: scale(1.04);	
    left: 27.5%;
  
  100%
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);	
    left: 27%;
  	

.button
  background-color: #f49a22!important;/* Old browsers */
  background: -moz-linear-gradient(left, #efaf00 0%, #dd5c00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #efaf00 0%,#dd5c00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #efaf00 0%,#dd5c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efaf00', endColorstr='#dd5c00',GradientType=1 ); /* IE6-9 */

  box-shadow: 0px 3px 6px rgba(156, 116, 86, 0.4);
  display: inline-block;
  color: white;
  padding: 0 14px;
  height: 30px;
  border-radius: 80px!important;
  font-size: 12px;

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="wrapper">
  <div class="animates btn-overlay">
    <input type="submit" value="SIGN UP HERE!" name="subscribe" class="button">
  </div>
</div>

</body>
</html>

动画检查器支持 CSS 动画、CSS 过渡和网络动画。 requestAnimationFrame 目前不支持动画。

【讨论】：

【参考方案2】：

是的，这是可能的。

可以使用 Chrome DevTools 调试过渡和 CSS 动画。只需点击此按钮：

然后，“动画”选项卡将在控制台面板中打开（如果您已关注 DevTools，则可以通过按 Esc 打开它 - 只需单击 DevTools 即可获得焦点）：

【讨论】：

太棒了...... :) 我不知道这个......它为我节省了很多时间。我发现由于某种原因我的最新版 Chrome 不再有那个按钮。我必须单击右上角的 3 点图标，然后单击更多工具，然后选择动画 “过滤器”部分中的按钮似乎已被删除。它仍然可以在“更多工具”->“动画”下右上角的三点菜单中找到。它也可以在“控制台”旁边的三点菜单中作为“动画”使用。【参考方案3】：

经过一些研究，目前看来使用 Chrome DevTools 是不可能的。以下是我发现的一些随机信息：

截至 2013 年 3 月，Firefox 的 DevTools 中不存在此类功能，尽管 Mozilla developers have acknowledged having received requests for this。截至 2013 年 11 月，Chrome DevTools 没有工具 to debug the rendering of CSS animations。 Chrome DevTools does have support 用于单步执行 HTML5 画布 动画。无法单步执行动画的转换 using javascript，因为“转换的内部 [未] 暴露给 Javascript”。最后但并非最不重要的一点 - 在DevTools API 中我没有立即发现任何内容表明支持调试 CSS 动画。

对于它的价值，这里有一些建议，虽然我没有测试过这些并且我对这个主题相当无知：

如果可能，pause the animation 通过更改元素的 animation-play-state 属性：

.paused 
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;

将动画拖出更长的时间，使过渡行为更加清晰。

如果执行动画之类的任务至关重要，还可以选择使用 <canvas> 动画（显然 Chrome DevTools 有更好的调试支持）。

【讨论】：

【参考方案4】：

Download Chrome Canary 可以访问新的动画控制功能。观看此视频以预览其工作原理：

https://vimeo.com/116038639

【讨论】：

这并没有让你足够慢，也没有暂停它的捷径，它完全是鼠标驱动的。我有一个动画错误，如果没有精确的计时/快捷方式，目前几乎无法调试！！可以在valhead.com/2015/01/06/quick-tip-chrome-animation-controls 找到描述其工作原理的附加文本。此外，它现在是常规 Chrome 版本 43.0.2357.132。

以上是关于使用 Chrome Devtools 调试 CSS 动画的主要内容，如果未能解决你的问题，请参考以下文章

Chrome动画调试最佳实践

如何使用DevTools调试Nodejs运行的Javascript

无法使用 Chrome DevTools 调试 node.js

使用 ChromeDriver 和 Chrome DevTools 协议进行多客户端远程调试

Chrome 73：无法再使用 Dedicated DevTools for Node 调试 NodeJS

在远程调试窗口调整 Chrome DevTools 的停靠位置