Ik zou graag een coole truc voor Mozilla Firefox met je willen delen die je productiviteit kan verhogen en je tijd kan besparen. Tijdens het surfen op internet 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.
Advertentie
Wanneer een webpagina wordt geladen, maakt uw webbrowser een documentobjectmodel van de pagina. De DOM is opgebouwd 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.
Naar maak een screenshot van een specifiek webpagina-element in Firefox , voer de volgende stappen uit:
- Open de gewenste pagina in Firefox en klik met de rechtermuisknop op het element dat u wilt vastleggen.
- Selecteer in het contextmenu 'Inspect element':
- De inspectietool wordt geopend. Merk op dat het een breadcrumb-besturingselement heeft voor de DOM-boomknooppunten:
- Daar kunt u met de rechtermuisknop op elk element klikken en kiezen Screenshot Node vanuit het contextmenu:
Dit is precies wat we nodig hebben.
Dit is precies wat we nodig hebben.Het mooie van deze functie is dat het ook lange elementen vastlegt, inclusief de meeste elementen waarvoor scrollen vereist is. In mijn geval is dit hoe de schermafbeelding eruit ziet:
U kunt ook de ingebouwde screenshot opdracht. Eerder schreef ik Hoe u een screenshot maakt 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.
- Open Firefox en druk op Shift + F2 op het toetsenbord. Firefox opent een console / opdrachtregel onder aan het scherm.
- Typ de volgende opdracht erin:
screenshot --selector 'naam'
Vervang de naam 'gedeelte' 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 een screenshot te maken van een specifiek webpagina-element.
