Machen Sie einen Screenshot eines bestimmten Webseitenelements in Firefox

Ich möchte mit Ihnen einen coolen Trick für Mozilla Firefox teilen, der Ihre Produktivität steigern und Ihre Zeit sparen kann. Beim Surfen im Internet möchten Sie manchmal etwas mit Ihren Freunden teilen, indem Sie einen Screenshot davon machen. Es sind jedoch mehrere Schritte erforderlich, um einen Screenshot der gesamten Seite zu erstellen, zu speichern, zuzuschneiden usw. In diesem Artikel erfahren Sie, wie Sie direkt einen Screenshot eines bestimmten Elements auf einer Webseite erstellen, ohne Add-Ons zu verwenden.

Wenn eine Webseite geladen wird, erstellt Ihr Webbrowser ein Dokumentobjektmodell der Seite. Das DOM ist als Baumstruktur aufgebaut, wobei jeder Knoten ein Objekt ist, das einen Teil des Dokuments repräsentiert.

Sehen wir uns an, wie Sie damit nur ein bestimmtes Element in Ihrem Screenshot erfassen können.

Zu Machen Sie einen Screenshot eines bestimmten Webseitenelements in Firefox, führen Sie die folgenden Schritte aus:

1. Öffnen Sie die gewünschte Seite in Firefox und klicken Sie mit der rechten Maustaste auf das Element, das Sie erfassen möchten.
2. Wählen Sie im Kontextmenü „Element prüfen“ aus:
3. Das Inspektor-Tool wird geöffnet. Beachten Sie, dass es ein Breadcrumb-Steuerelement für die DOM-Baumknoten hat:
4. Dort können Sie mit der rechten Maustaste auf jedes Element klicken und auswählen Screenshot-Knoten aus dem Kontextmenü:Genau das brauchen wir.

Das Tolle an dieser Funktion ist, dass sie auch lange Elemente erfasst, einschließlich der meisten Elemente, die gescrollt werden müssen. In meinem Fall sieht der Screenshot so aus:

Alternativ können Sie das eingebaute Bildschirmfoto Befehl. Vorhin habe ich geschrieben So erstellen Sie einen Screenshot der geöffneten Seite in Firefox. In dem erwähnten Artikel haben wir den eingebauten Firefox-Befehl "screenshot" verwendet, um die gesamte Seite zu erfassen. Die gleiche Funktionalität kann verwendet werden, um ein bestimmtes Element auf der geöffneten Seite zu scannen.

1. Öffne Firefox und drücke Umschalt + F2 auf der Tastatur. Firefox öffnet eine Konsole / Befehlszeile am unteren Bildschirmrand.
2. Geben Sie darin den folgenden Befehl ein:

   Screenshot --Selektor "Name"

   Ersetzen Sie den Namen "portion" durch den entsprechenden Selektornamen. In meinem Fall sollte es so sein

   screenshot --selector "#widget-apps > .iconlist > .iconlist-content > ul"

Die zweite Methode ist nützlich für Webentwickler, die den genauen DOM-Elementpfad kennen. Der durchschnittliche Benutzer wird offensichtlich die erste Methode bevorzugen, den Screenshot eines bestimmten Webseitenelements zu erstellen.