Chrome 開発者ツールで縦に長い画面のブラウザキャプチャ

Chrome 開発者ツールでブラウザキャプチャ

Chromeの画面をキャプチャしたいときは、キャプチャツールを使わずとも、そもそも開発者ツールで標準でフルスクリーンをキャプチャする機能があります。

開発者ツール（F12）でToggle device toolbarをクリックします。または、ctrl + shift + mを押します。

以下のようにプレビュー画面が表示されます。※以下はヤフーのプレビューです。

「Responsive」をクリックし、「Edit…」をクリックします。

エミュレートしたいデバイスを追加しておきます。

例えば「Laptop with HiDPI screen」や「Laptop with MDPI screen」などを追加しておけばフルスクリーンでキャプチャ可能です。

次に右上の三点リーダーをクリックして「Capture full size screenshot」をクリックすれば全画面のキャプチャをpngかjpgで保存ができます。

開発者ツール（F12）を表示して、ctrl + shift + pでプロンプトが表示されます。

わかりにくいかもしれないので以下のgifを参照ください。

「Capture area screenshot」を選ぶと矩形選択した個所がpngファイルとしてダウンロードされます。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^