‏افزونه‌ی DevTools برای دیباگ Scroll-Triggered Animations

Bramus یه افزونه به اسم Scroll-Triggered Animations Debugger برای Chrome DevTools منتشر کرده. کارش دیباگ کردن CSS Scroll-Triggered Animations هست، یعنی انیمیشن‌هایی که وقتی یه المان موقع اسکرول از یه مرز مشخص رد می‌شه، شروع می‌شن. این افزونه یه پنل جدید به اسم «Scroll-Triggered Animations» به بخش Elements توی DevTools اضافه می‌کنه.

توی این پنل یه minimap تعاملی هست که scroller، خود المان و subject انیمیشن رو نشون می‌ده. هم ScrollTimeline (یعنی scroll()) رو پشتیبانی می‌کنه هم ViewTimeline (یعنی view()). یه چراغ وضعیت هم داره که وقتی تریگر فعال می‌شه از قرمز (Inactive) به سبز (Active) تغییر می‌کنه. با position: sticky هم مشکلی نداره.

مهم‌ترین بخشش اینه که دو تا بازه رو با خط و کادر نشون می‌ده: timeline-trigger-activation-range با رنگ آبی (بازه‌ای که انیمیشن رو روشن می‌کنه) و timeline-trigger-active-range با رنگ سبز (بازه‌ای که انیمیشن توش فعال می‌مونه). این مقدارها رو می‌شه همون‌جا زنده ویرایش کرد و نتیجه رو دید.

نویسنده می‌گه ایده از یه دموی CodePen اومد که برای خودش ساخته بود تا بفهمه چی داره اتفاق می‌افته. سال ۲۰۲۳ هم یه افزونه‌ی مشابه برای Scroll-Driven Animations ساخته بود. این بار با Antigravity و Gemini کد اون افزونه‌ی قبلی و دموی CodePen رو با هم ترکیب کرده و افزونه‌ی جدید خیلی سریع ساخته شده.

نسخه‌ی 1.0.0 چند تا محدودیت داره که از خود مرورگر میاد. اول اینکه بازه‌هایی که با واحدهای نسبی مثل 90vh نوشته شدن، توی Range Editor به px نشون داده می‌شن. دلیلش اینه که هم Animation و هم getComputedStyle مقدار محاسبه‌شده رو برمی‌گردونن و API‌ای برای گرفتن واحد اصلی وجود نداره. دوم اینکه روی المان‌های داخل iframe کار نمی‌کنه، چون یه باگ توی DevTools باعث می‌شه $0 اشتباه برگرده. برای همین توی Editor View سایت CodePen جواب نمی‌ده و باید دمو رو توی Debug View باز کنی.

به گفته‌ی نویسنده، برنامه‌ی کوتاه‌مدت رفع باگ‌ها و چند تا قابلیت جدیده. هدف بلندمدت هم اینه که یه روز خود DevTools این قابلیت رو داخلی داشته باشه و این افزونه دیگه لازم نباشه.

نکات کلیدی:

• افزونه یه پنل جدید به بخش Elements توی Chrome DevTools اضافه می‌کنه و از Chrome Web Store قابل نصبه.
• هم scroll() و هم view() رو پشتیبانی می‌کنه و با position: sticky هم سازگاره.
• مقدارهای timeline-trigger-activation-range و timeline-trigger-active-range رو می‌شه زنده ویرایش کرد.
• واحدهای نسبی مثل 90vh به خاطر محدودیت مرورگر به صورت px نشون داده می‌شن.
• روی المان‌های داخل iframe به خاطر باگ crbug/1480418 کار نمی‌کنه.