画面に収まらないページのスクリーンショットをとる方法（Google Chrome）

スクリーンショット

縦長で画面に収まらないページのスクリーンショットをとる場合、今までは複数回に分けてスクリーンショットをとってPhoto Shopなどで画像を繋げたりしていた。

Google Chromeのデベロッパーツールを使えば表示されていない部分も含めてスクリーンショットをとれる事が分かったので備忘録として記事にしておく。

環境

試した環境は以下の通りである。

操作方法

過去記事の「M5StickCからBLEで送信された温湿度をラズパイでグラフ化してLINEで表示」の記事のスクリーンショットで試してみる。

Alt＋PrtScrでスクリーンショットをとると下記の様に画面上で見えている部分のスクリーンショットが取得される。

• F12
• ページ上で右クリック、検証
• Ctrl＋Shift＋i

いずれかの方法でChromeのデベロッパーツールを起動する。

• 縦に点が3つ並んだメニュー、Run Command
• Ctrl+Shift+p

いずれかの方法でコマンドラインを起動する。

Screenshot Capture full size Screenshotを選択する。

スクリーンショットファイルを適当な所に保存する。

フルサイズのスクリーンショットが取得された

以上で今回の記事は終了とする。

この記事が何処かで誰かの役に立つことを願っている。

尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。