Želio bih podijeliti s vama cool trik za Mozilla Firefox koji vam može povećati produktivnost i uštedjeti vrijeme. Dok surfate webom, ponekad želite podijeliti nešto sa svojim prijateljima tako što ćete snimiti snimku zaslona. No potrebno je nekoliko koraka za snimanje snimke zaslona cijele stranice, spremanje, obrezivanje itd. U ovom ćemo članku vidjeti kako izravno napraviti snimku zaslona određenog elementa na web stranici bez upotrebe dodataka.
Oglas
Kada se učita web stranica, vaš web preglednik kreira objektni model dokumenta stranice. DOM je konstruiran kao struktura stabla u kojoj je svaki čvor objekt koji predstavlja dio dokumenta.
Pogledajmo kako to možete koristiti za hvatanje samo određenog elementa na snimku zaslona.
Do napravite snimku zaslona određenog elementa web stranice u Firefoxu , napravite sljedeće korake:
- Otvorite željenu stranicu u Firefoxu i desnom tipkom miša kliknite element koji želite snimiti.
- Iz kontekstnog izbornika odaberite 'Provjeri element':
- Otvorit će se alat inspektora. Primijetite da ima kontrolnu tablicu za čvorove DOM stabla:
- Tamo možete desnom tipkom miša kliknuti bilo koji element i odabrati Čvor snimke zaslona iz kontekstnog izbornika:To je upravo ono što nam treba.
Sjajna stvar ove značajke je što snima i duge elemente, uključujući većinu elemenata koji zahtijevaju pomicanje. U mom slučaju, evo kako izgleda snimka zaslona:
Možete koristiti i ugrađeni snimka zaslona naredba. Ranije sam napisao Kako napraviti snimku zaslona otvorene stranice u Firefoxu . U spomenutom članku koristili smo ugrađenu naredbu Firefox 'screenshot' da snimimo cijelu stranicu. Ista se funkcija može koristiti za snimanje zaslona određenog elementa na otvorenoj stranici.
- Otvorite Firefox i pritisnite Shift + F2 na tipkovnici. Firefox će otvoriti konzolu / naredbeni redak na dnu zaslona.
- U nju unesite sljedeću naredbu:
snimka zaslona - odabir 'ime'
Zamijenite naziv 'dio' odgovarajućim imenom selektora. U mom slučaju bi trebalo biti
snimka zaslona --selector '# widget-apps> .iconlist> .iconlist-content> ul'
Druga metoda korisna je za web programere koji znaju točan put DOM elementa. Prosječni će korisnik očito preferirati prvu metodu snimanja snimke zaslona određenog elementa web stranice.