滚动驱动的动画调试器
Scroll-Driven Animations Debugger 是由 Bramus Van Damme 开发的 Chrome 平台的 DevTools 扩展。它是一个强大的工具，用于可视化和调试滚动驱动的动画。
通过这个扩展，用户可以轻松地可视化滚动器、元素和滚动驱动的动画的主题。它支持 ScrollTimeline 和 ViewTimeline，使其适用于不同类型的动画。无论动画是基于 CSS 还是基于 WAAPI，这个工具都能无缝处理。
Scroll-Driven Animations Debugger 的一个显著特点是它与 `position: sticky` 的兼容性。用户可以可视化 `animation-range-start` 和 `animation-range-end`，从而精确控制和编辑这些值。
要使用这个扩展，用户只需安装它并在 Chrome DevTools 的 Elements 面板中打开 "Scroll-Driven Animations" 窗格。从那里，他们可以检查一个元素，并看到应用于它的滚动驱动动画的实时表示。当用户滚动文档时，可视化会实时更新。
顶部工具栏提供了额外的功能，比如在多个动画之间切换和调整可视化的比例因子。用户还可以找到有用的信息，比如滚动时间轴的类型和进度数字，包括总滚动进度和实际滚动偏移。
此外，用户可以使用底部的 "编辑值" 切换来编辑动画范围值。扩展提供了一个范围编辑器，其中包含开始和结束范围的指示器。虽然输入目前不会实时更新，但用户可以通过在字段外单击来轻松更新值。
总的来说，Scroll-Driven Animations Debugger 是开发人员在处理滚动驱动动画时的一个必备工具。它的可视化能力、与不同类型动画的兼容性以及范围编辑功能使其成为调试和微调动画的有价值的资产。
