ブラウザのページ読み込み中の画面を時系列でキャプチャする方法

こんにちは、現役エンジニアの inno_tech です。

ブラウザのページ読み込み中の画面を時系列でキャプチャする方法をお探しでしょうか？それ、Chrome開発者ツールを使ってできます！

本記事を見れば、ブラウザのページ読み込み中の動作を時系列でスクリーンショットできるようになります。

本記事では、Google Chromeの開発者ツール(デベロッパーツール)で動作確認しています。

時系列でスクリーンショットを取得する

Google Chromeで確認したいページにアクセスし、Ctrl + Shift + Iで開発者ツールを起動します。

次に開発者ツールの上側にあるタブメニューから「Network」タブを開きます。

Networkタブを開くと「Capture screenshots」というチェックボックスがあるので ON にします。この状態でページをリロードCtrl + Rしてみましょう。

すると開発者ツール上にスクリーンショットが自動的に記録され、その一覧が表示されます。

スクリーンショットをダブルクリックすると、画像を拡大して表示できます。下の画像はYOUTUBEを開いたときの例ですが、徐々に動画が読み込まれていることがわかります。

スクリーンショットが不要になったら、開発者ツールのチェックをOFFに戻しておきましょう。

まとめ

2021年の全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら。

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!