Debuger animacji i przejść

Chrome DevTools → More tools → Animations (lub Cmd+Shift+P → "Animations"). Panel rejestruje uruchamiane przejścia i animacje CSS, wyświetlając je na osi czasu z możliwością przewijania oraz sterowania szybkością odtwarzania.

Panel Animations oferuje szybkość odtwarzania 10%, 25% i 100%. Spowolnienie do 10% ujawnia problemy z czasem, krzywą funkcji czasu i zacinaniem, które są niewidoczne przy pełnej szybkości — jest to niezbędne podczas debugowania złożonej choreografii wielu elementów.

Każda zarejestrowana animacja jest wyświetlana jako wiersz zawierający nazwę elementu, pasek czasu trwania, przesunięcie opóźnienia i liczbę iteracji. Diamenty klatek kluczowych pokazują zmiany funkcji czasu. Najechanie na wiersz wyróżnia element w obszarze widoku.

Proszę przeciągnąć znacznik odtwarzania w panelu Animation w dowolne miejsce osi czasu animacji. Strona wyrenderuje dokładnie tę klatkę — można zatrzymać dowolną animację w dowolnym momencie i jednocześnie sprawdzić pozycje elementów, krycie oraz wartości transform w panelu Computed.

Proszę kliknąć wiersz animacji, aby go rozwinąć. Poszczególne klatki kluczowe pojawią się na osi czasu w postaci diamentów. Kliknięcie diamentu klatki kluczowej przenosi do odpowiadającej mu reguły @keyframes w panelu Styles, gdzie można ją edytować z podglądem na żywo.

Chrome DevTools pokazuje krzywe cubic-bezier dla każdego segmentu animacji. Proszę kliknąć ikonę krzywej obok funkcji czasu w panelu Styles, aby otworzyć edytor cubic-bezier — można przeciągać punkty sterujące i obserwować aktualizację animacji w czasie rzeczywistym.

Przejścia CSS są rejestrowane w panelu Animations po ich uruchomieniu. Proszę wywołać najazd kursorem lub przełączenie klasy, a panel przechwyci przejście. Można sprawdzić jego czas trwania, opóźnienie i funkcję czasu — jest to przydatne, gdy przejścia działają nieprawidłowo, ale trudno ustalić ich źródło.

Po włączeniu Rendering → Layer Borders (DevTools → Rendering) animowane elementy znajdujące się na własnej warstwie GPU mają zielone obramowania. Animacje niekompozytowane (zmieniające width, top lub color) nie mają obramowania warstwy i mogą powodować migotanie malowania — widoczne po włączeniu Paint Flashing.

Proszę nagrać profil Performance podczas animacji. Na wykresie płomieniowym należy szukać długich zdarzeń Paint lub Layout skorelowanych z klatkami animacji. Animacje wykonywane wyłącznie przez kompozytor (transform/opacity) pojawiają się tylko jako zdarzenia Composite Layer — są szybkie i nie wymagają malowania.

Animacje JavaScript używające rAF pojawiają się w panelu Performance w sekcji Frames. Długie wywołania zwrotne rAF, trwające ponad 16 ms, powodują gubienie klatek. Proszę profilować wywołanie zwrotne, aby znaleźć kosztowne obliczenia, i w miarę możliwości przenieść je poza główny wątek za pomocą Web Workers.

Web Animations API (element.animate()) oraz biblioteki oparte na WAAPI pojawiają się w panelu Animations obok animacji CSS. Panel nie potrafi rozróżnić źródła — CSS czy WAAPI — ale przewijanie osi czasu i sterowanie odtwarzaniem w zwolnionym tempie działają w obu przypadkach.

Panel Animations w DevTools rejestruje przejścia i animacje CSS na osi czasu, którą można przewijać, oferując zmienną szybkość odtwarzania, inspekcję klatek kluczowych i edycję cubic-bezier. W połączeniu z profilowaniem Performance i wizualizacją warstw zapewnia kompleksowe narzędzia do debugowania zarówno poprawności, jak i wydajności animacji CSS.