Urobte snímku obrazovky konkrétneho prvku webovej stránky vo Firefoxe

Rád by som sa s vami podelil o skvelý trik pre Mozilla Firefox, ktorý môže zvýšiť vašu produktivitu a ušetriť váš čas. Počas surfovania na webe sa niekedy chcete o niečo podeliť so svojimi priateľmi tak, že si z toho urobíte snímku obrazovky. Urobiť snímku obrazovky celej stránky, uložiť ju, orezať atď. však vyžaduje niekoľko krokov. V tomto článku uvidíme, ako priamo urobiť snímku obrazovky konkrétneho prvku na webovej stránke bez použitia doplnkov.

Keď sa načíta webová stránka, váš webový prehliadač vytvorí objektový model dokumentu stránky. DOM je konštruovaný ako stromová štruktúra, kde každý uzol je objekt reprezentujúci časť dokumentu.

Pozrime sa, ako to môžete použiť na zachytenie iba konkrétneho prvku do snímky obrazovky.

Komu urobte snímku obrazovky konkrétneho prvku webovej stránky vo Firefoxe, vykonajte nasledujúce kroky:

1. Otvorte požadovanú stránku vo Firefoxe a kliknite pravým tlačidlom myši na prvok, ktorý chcete zachytiť.
2. V kontextovej ponuke vyberte možnosť „Skontrolovať prvok“:
3. Otvorí sa nástroj inšpektora. Všimnite si, že má ovládací prvok drobčeka pre uzly stromu DOM:
4. Tam môžete kliknúť pravým tlačidlom myši na ľubovoľný prvok a vybrať si Uzol snímky obrazovky z kontextového menu:Presne toto potrebujeme.

Skvelé na tejto funkcii je, že zachytáva aj dlhé prvky vrátane väčšiny prvkov, ktoré vyžadujú posúvanie. V mojom prípade vyzerá snímka obrazovky takto:

Prípadne môžete použiť vstavaný snímka obrazovky príkaz. Predtým som napísal Ako urobiť snímku obrazovky otvorenej stránky vo Firefoxe. V spomínanom článku sme na zachytenie celej stránky použili vstavaný príkaz Firefoxu „screenshot“. Rovnakú funkcionalitu možno použiť na snímkovanie obrazovky konkrétneho prvku na otvorenej stránke.

1. Otvorte Firefox a stlačte Shift + F2 na klávesnici. Firefox otvorí konzolu / príkazový riadok v spodnej časti obrazovky.
2. Do nej zadajte nasledujúci príkaz:

   snímka obrazovky -- selektor "meno"

   Nahraďte názov „časť“ príslušným názvom voliča. V mojom prípade by to tak malo byť

   snímka obrazovky --selector "#widget-apps > .iconlist > .iconlist-content > ul"

Druhá metóda je užitočná pre webových vývojárov, ktorí poznajú presnú cestu prvku DOM. Bežný používateľ bude samozrejme uprednostňovať prvý spôsob, ako urobiť snímku obrazovky konkrétneho prvku webovej stránky.