子育てエンジニアブログ

子育てに励むシステムエンジニア(SE)のブログ

Chromeのデベロッパーツールでフィルムストリップ表示する方法

Chromeデベロッパーツールでフィルムストリップ表示する方法についてです。

Chromeデベロッパーツールでフィルムストリップ表示を使用すると、ページのレンダリングスクリーンショットと時間を始めから終わりまで表示することができます。

まずは、デベロッパーツールを起動し、「Network」パネルを選択します。
f:id:STSA:20181202001007p:plain

次に、カメラアイコンをクリックします。
f:id:STSA:20181202001019p:plain

最後にページをリロードします。
すると、次のようにページのレンダリングスクリーンショットと時間を始めから終わりまでが表示されます。
f:id:STSA:20181202001056p:plain