Een screenshot maken van een specifiek webpagina-element in Firefox

Ik wil graag een coole truc voor Mozilla Firefox met je delen die je productiviteit kan verhogen en je tijd kan besparen. Tijdens het surfen op het web wil je soms iets met je vrienden delen door er een screenshot van te maken. Maar er zijn verschillende stappen nodig om een ​​screenshot van de hele pagina te maken, op te slaan, bij te snijden enz. In dit artikel zullen we zien hoe je direct een screenshot kunt maken van een specifiek element op een webpagina zonder add-ons te gebruiken.

Wanneer een webpagina wordt geladen, maakt uw webbrowser een documentobjectmodel van de pagina. De DOM is geconstrueerd als een boomstructuur waarin elk knooppunt een object is dat een deel van het document vertegenwoordigt.

Laten we eens kijken hoe u dit kunt gebruiken om alleen een specifiek element in uw screenshot vast te leggen.

Tot een screenshot maken van een specifiek webpagina-element in Firefox, voer de volgende stappen uit:

1. Open de gewenste pagina in Firefox en klik met de rechtermuisknop op het element dat u wilt vastleggen.
2. Selecteer in het contextmenu "Inspecteer element":
3. De inspectietool wordt geopend. Merk op dat het een broodkruimelbesturingselement heeft voor de DOM-boomknooppunten:
4. Daar kun je met de rechtermuisknop op elk element klikken en kiezen Screenshot Knooppunt vanuit het contextmenu:Dit is precies wat we nodig hebben.

Het mooie van deze functie is dat het ook lange elementen vastlegt, inclusief de meeste elementen die moeten worden gescrolld. In mijn geval ziet de schermafbeelding er als volgt uit:

Als alternatief kunt u de ingebouwde schermafbeelding opdracht. Eerder schreef ik Hoe maak je een screenshot van de geopende pagina in Firefox. In het genoemde artikel hebben we het ingebouwde Firefox-commando "screenshot" gebruikt om de hele pagina vast te leggen. Dezelfde functionaliteit kan worden gebruikt om een ​​screenshot te maken van een specifiek element op de geopende pagina.

1. Open Firefox en druk op Shift + F2 op het toetsenbord. Firefox opent een console / opdrachtregel onder aan het scherm.
2. Typ de volgende opdracht erin:

   screenshot --selector "naam"

   Vervang de naam "portie" door de juiste selectornaam. In mijn geval zou het moeten zijn

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

De tweede methode is handig voor webontwikkelaars die het exacte DOM-elementpad kennen. De gemiddelde gebruiker zal uiteraard de voorkeur geven aan de eerste methode om de schermafbeelding van een specifiek webpagina-element te maken.