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

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

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

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

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

Chromeのウェブブラウザのキャプチャは開発者ツールで標準装備されています

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

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

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

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

Chromeのウェブブラウザのキャプチャは開発者ツールで標準装備されています

開発者ツールのプロンプトからスクリーンショットを撮る

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

Chromeのウェブブラウザのキャプチャは開発者ツールで標準装備されています

 

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

Chromeのウェブブラウザのキャプチャは開発者ツールで標準装備されています

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

コメント

タイトルとURLをコピーしました