アニメーションとトランジションのデバッガー

Chrome DevTools → More tools → Animations（またはCmd+Shift+P → 「Animations」）を選択します。このパネルでは、CSSトランジションとアニメーションの実行が記録され、スクラブ操作や再生速度の制御が可能なタイムラインに表示されます。

Animationsパネルでは、再生速度を10%、25%、100%から選択できます。10%まで遅くすると、通常の速度では見えないタイミングの問題、イージング曲線の問題、カクつきが明らかになります。複数の要素が複雑に連動する演出をデバッグするうえで不可欠です。

記録された各アニメーションは、要素名、再生時間を示すバー、遅延オフセット、反復回数を含む行として表示されます。キーフレームのひし形は、タイミング関数の変化を示します。行にカーソルを合わせると、ビューポート内の要素が強調表示されます。

Animationsパネルの再生ヘッドをドラッグして、アニメーションタイムライン上の任意の位置に移動します。ページにはその時点のフレームが正確に表示されます。任意のアニメーションを任意の瞬間で停止し、要素の位置、opacity、transformの値をComputedパネルで同時に確認できます。

アニメーションの行をクリックして展開します。タイムライン上に個々のキーフレームがひし形で表示されます。キーフレームのひし形をクリックすると、スタイルパネル内の対応する@keyframesルールに移動し、ライブプレビューで編集できます。

Chrome DevToolsには、各アニメーション区間のcubic-bezier曲線が表示されます。スタイルパネルでタイミング関数の横にある曲線アイコンをクリックすると、cubic-bezierエディターが開きます。制御点をドラッグすると、アニメーションの更新をリアルタイムで確認できます。

CSSトランジションは、発生したときにAnimationsパネルへ記録されます。ホバーやクラスの切り替えを発生させると、パネルにトランジションが取り込まれます。再生時間、遅延、タイミング関数を確認できるため、トランジションの動作が意図と異なるものの、原因が明確でない場合に役立ちます。

DevTools → RenderingでLayer Bordersを有効にすると、独自のGPUレイヤー上にあるアニメーション要素に緑色の境界線が表示されます。width、top、colorをアニメーションさせるような非合成アニメーションにはレイヤーの境界線が表示されず、ペイントのフラッシュを引き起こす可能性があります。これはPaint Flashingを有効にすると確認できます。

アニメーション中にPerformanceプロファイルを記録します。フレームチャートで、アニメーションのフレームと相関する、時間の長いPaintまたはLayoutイベントを探します。コンポジターのみで処理されるアニメーション（transform/opacity）はComposite Layerイベントとしてのみ表示され、高速でペイントも発生しません。

rAFを使用するJSアニメーションは、PerformanceパネルのFramesセクションに表示されます。16msを超える長いrAFコールバックは、フレーム落ちの原因になります。コールバックをプロファイルして負荷の高い計算を特定し、可能であればWeb Workersを使用してメインスレッドの外へ移してください。

Web Animations API（element.animate()）とWAAPIベースのライブラリは、CSSアニメーションとともにAnimationsパネルに表示されます。パネルでは、アニメーションのソースがCSSかWAAPIかを区別できませんが、スクラブ操作とスローモーションの制御はどちらにも使用できます。

DevToolsのAnimationsパネルでは、CSSトランジションとアニメーションを、スクラブ操作に対応したタイムライン、可変の再生速度、キーフレーム検査、cubic-bezier編集機能とともに記録できます。Performanceプロファイリングやレイヤーの可視化と組み合わせることで、CSSアニメーションの正確性とパフォーマンスの両方をデバッグするための包括的なツールになります。