Google Chromeでページ全体のスクリーンショットを撮る

Webページ全体のスクリーンショットを撮りたいことがたまにあります。

ただ、頻繁に使う操作ではないので、必要になるたびに「Chromeでページ全体のスクショってどうやるんだっけ？」となりがちです。Google Chromeなら拡張機能を入れなくてもDevToolsから撮れるので、手順を残しておきます。

手順

スクリーンショットを撮りたいページをGoogle Chromeで開く。
DevToolsを開く。
- macOS: Command + Option + I
- Windows / Linux: Ctrl + Shift + I
コマンドメニューを開く。
- macOS: Command + Shift + P
- Windows / Linux: Ctrl + Shift + P
入力欄に スクリーンショット と入力する。
フルサイズのスクリーンショットをキャプチャ を選ぶ。
ページ全体のPNG画像がダウンロードされる。

Chromeの言語設定を英語にしている場合は、screenshot と入力して Capture full size screenshot を選びます。

DevToolsを開く → コマンドメニューを開く → スクリーンショットで検索 → フルサイズのスクリーンショットをキャプチャ

この流れだけ覚えておけば大丈夫です。

保存先は通常、Chromeのダウンロード先フォルダ。
表示中の範囲だけ撮りたい場合は スクリーンショットをキャプチャ を選ぶ。英語UIでは Capture screenshot。
特定の要素だけ撮りたい場合は、DevToolsで対象要素を選択してから ノードのスクリーンショットをキャプチャ を使う。英語UIでは Capture node screenshot。
ログインが必要なページや、スクロールで後から読み込まれるページでは、撮影前に必要な表示状態までページを操作しておく。
固定ヘッダーや追従ボタンがあるページでは、スクリーンショット内に繰り返し写ることがある。

ページ全体のスクリーンショットを撮るだけなら、Chrome標準のDevToolsで十分でした。

次に忘れたらこの記事を見ればよし。