Firefoxで特定のWebページ要素のスクリーンショットを撮る

生産性を高めて時間を節約できるMozillaFirefoxのクールなトリックを紹介したいと思います。 Webサーフィンをしているときに、スクリーンショットを撮って友達と何かを共有したい場合があります。 ただし、ページ全体のスクリーンショットを撮ったり、保存したり、トリミングしたりするには、いくつかの手順が必要です。 この記事では、アドオンを使用せずに、Webページ上の特定の要素のスクリーンショットを直接撮る方法を説明します。

Webページがロードされると、Webブラウザはページのドキュメントオブジェクトモデルを作成します。 DOMは、各ノードがドキュメントの一部を表すオブジェクトであるツリー構造として構築されます。

これを使用して、特定の要素のみをスクリーンショットにキャプチャする方法を見てみましょう。

に Firefoxで特定のWebページ要素のスクリーンショットを撮る、次の手順を実行します。

1. Firefoxで目的のページを開き、キャプチャする要素を右クリックします。
2. コンテキストメニューから、[要素の検査]を選択します。
3. インスペクターツールが開きます。 DOMツリーノードのブレッドクラムコントロールがあることに注意してください。
4. そこで、任意の要素を右クリックして選択できます スクリーンショットノード コンテキストメニューから：これはまさに私たちが必要としているものです。

この機能の優れている点は、スクロールが必要なほとんどの要素を含む長い要素もキャプチャすることです。 私の場合、スクリーンショットは次のようになります。

または、組み込みのを使用することもできます スクリーンショット 指図。 以前、私は書いた Firefoxで開いたページのスクリーンショットを撮る方法. 前述の記事では、Firefoxに組み込まれているコマンド「screenshot」を使用してページ全体をキャプチャしました。 同じ機能を使用して、開いたページの特定の要素のスクリーンショットを撮ることができます。

1. Firefoxを開き、を押します Shift + F2 キーボード上。 Firefoxは、画面の下部にコンソール/コマンドラインを開きます。
2. その中に次のコマンドを入力します。

   スクリーンショット--selector "name"

   名前「portion」を適切なセレクター名に置き換えます。 私の場合、

   スクリーンショット--selector "＃widget-apps> .iconlist> .iconlist-content> ul"

2番目の方法は、正確なDOM要素パスを知っているWeb開発者に役立ちます。 平均的なユーザーは明らかに、特定のWebページ要素のスクリーンショットを撮る最初の方法を好むでしょう。