Firefox で Web ページ内のスクロール要素を含むスクリーンショットを撮るにはどうすればいいですか?

Question

ウェブページ全体のスクリーンショットを撮る必要があります。問題は、画面に収まらない単一の要素のコンテンツ全体をスクリーンショットに含める必要があることです。

これは、高さの関係でスクロールバーがある単一列のテーブルです。これは IFRAME ではありません (独自のタブに読み込むのは簡単です)。

列にはフォーマットされたテキストといくつかの小さな画像が含まれています。

スクロールする長い Web ページの場合、このタスクを実行するのは簡単です。しかし、ページ内にスクロールする個別の要素が含まれている場合は、どのように実行すればよいのでしょうか。

明確にするために、要素自体だけでなく、ページ全体をキャプチャする必要があります。

Windows 上の Firefox を使用してこれを実現したいと思います。

Answer 1

私の提案は、Firefoxの組み込み機能単一の DOM 要素のスクリーンショットを撮ることができます。

開発者ツールを開いて→要素を見つけて→右クリックしてスクリーンショットを撮るだけです

私の内部サイトの 1 つでは機能しなかったため、すべてのサイトで機能するかどうかはわかりません。

OP の編集後の更新:

以下のようにDOM要素のコンテンツ全体とともにページ全体を記録する場合は、DOM要素の高さをライブ編集する必要があります。しかし...

多くの DOM 要素がビューポートやスクリーンショットから押し出され、私の知る限り、他のツールではそれをキャプチャできないため、目的に合わないと思います。

以下からお読みくださいhttps://en.wikipedia.org/wiki/スクリーンショット

スクリーンショット、スクリーン キャプチャ、スクリーン キャップ、キャップ、スクリーン ダンプ、またはスクリーングラブは、使用中のモニター、テレビ、またはその他の視覚出力デバイスに表示される可視項目を記録するために人が撮影した画像です。

本当にあなたのやり方でやらなければならないのであれば、GIF を作成するか、1 ページ全体のスクリーンショットと DOM 要素のみのスクリーンショットを 2 つ撮って 1 つに結合します。

Answer 2

2021 編集

ツールバーはFFから削除されました。しかし、コンソールに を先頭に付けてコマンドを入力することで、コマンドにアクセスできます:。スクリーンショットの場合は、

:screenshot --fullpage fullpage.png

または

:screenshot --selector #hot-network-questions fullpage.png

古い回答

開発者ツールバーからスクリーンショット コマンドを使用できます。

1. Shift+を押してF2ツールバーを開くか、Web 開発者ツール メニューから選択します。

2. ツールバーで、コマンドを入力しますscreenshot --fullpage fullpage.png。

単一の要素をキャプチャするには、--selectorフラグ付きのCSSセレクタを使用します。例:

screenshot --selector #hot-network-questions

下の画像が表示されます

Answer 3

Firefoxのレスポンシブデザインモード幅を通常の値に設定し、高さをページ全体を囲むのに十分な大きさに設定します。次に、スクリーンショット ボタン (カメラ アイコン) をクリックします。

Answer 4

私が使うスクリーンプレッソスクロールスクリーンショットを撮ることができます。基本的にはスクリーンショットを撮り、下にスクロールして別のスクリーンショットを撮るなど、その後 Screenpresso がそれらをつなぎ合わせます。Screenpresso も無料です。

ちなみに、スクリーンショットをスクロールするためのショートカット キーは、Windows キー + Shift キー + PrintScreen です。次に、スクロールするウィンドウをクリックします。スクリーンショットを撮る次の部分に到達したら、右クリック、下にスクロール、右クリックなどを行います。完了したら、左クリックすると、スクリーンショットがつなぎ合わされます。つなぎ合わせのプロセスがうまく機能するように、各スクリーンショットに重なりを持たせるようにしてください。