Napravite snimku zaslona određenog elementa web stranice u Firefoxu

Želio bih s vama podijeliti cool trik za Mozilla Firefox koji može povećati vašu produktivnost i uštedjeti vaše vrijeme. Dok surfate webom, ponekad poželite nešto podijeliti sa svojim prijateljima tako što ćete napraviti snimku zaslona. Ali potrebno je nekoliko koraka da napravite snimku zaslona cijele stranice, spremite je, izrežete itd. U ovom članku ćemo vidjeti kako izravno napraviti snimku zaslona određenog elementa na web stranici bez korištenja dodataka.

Kada se web stranica učita, vaš web preglednik stvara model objekta dokumenta stranice. DOM je konstruiran kao struktura stabla u kojoj je svaki čvor objekt koji predstavlja dio dokumenta.

Pogledajmo kako to možete upotrijebiti za snimanje samo određenog elementa u snimku zaslona.

Do napravite snimku zaslona određenog elementa web stranice u Firefoxu, učinite sljedeće korake:

1. Otvorite željenu stranicu u Firefoxu i desnom tipkom miša kliknite element koji želite snimiti.
2. Iz kontekstnog izbornika odaberite "Provjeri element":
3. Alat za pregled će se otvoriti. Primijetite da ima kontrolu mrvica za DOM čvorove stabla:
4. Tamo možete desnom tipkom miša kliknuti bilo koji element i odabrati Čvor snimka zaslona iz kontekstnog izbornika:To je upravo ono što nam treba.

Sjajna stvar u vezi s ovom značajkom je da također snima dugačke elemente, uključujući većinu elemenata koji zahtijevaju pomicanje. U mom slučaju, evo kako izgleda snimka zaslona:

Alternativno, možete koristiti ugrađeni snimka zaslona naredba. Ranije sam pisao Kako napraviti snimku zaslona otvorene stranice u Firefoxu. U spomenutom članku koristili smo ugrađenu Firefox naredbu "screenshot" za snimanje cijele stranice. Ista se funkcionalnost može koristiti za snimanje zaslona određenog elementa na otvorenoj stranici.

1. Otvorite Firefox i pritisnite Shift + F2 na tipkovnici. Firefox će otvoriti konzolu / naredbeni redak na dnu zaslona.
2. Upišite sljedeću naredbu unutar njega:

   screenshot --selektor "ime"

   Zamijenite naziv "porcija" odgovarajućim imenom birača. U mom slučaju, tako bi trebalo biti

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

Druga metoda je korisna za web programere koji znaju točan put DOM elementa. Prosječan korisnik očito će preferirati prvu metodu snimanja zaslona određenog elementa web stranice.