Ta et skjermbilde av et bestemt nettsideelement i Firefox
Jeg vil gjerne dele med deg et kult triks for Mozilla Firefox som kan øke produktiviteten og spare tid. Mens du surfer på nettet, ønsker du noen ganger å dele noe med vennene dine ved å ta et skjermbilde av det. Men det tar flere trinn å ta et skjermbilde av hele siden, lagre den, beskjære den osv. I denne artikkelen vil vi se hvordan du direkte tar et skjermbilde av et spesifikt element på en nettside uten å bruke tillegg.
Annonse
Når en nettside er lastet inn, oppretter nettleseren en dokumentobjektmodell av siden. DOM er konstruert som en trestruktur der hver node er et objekt som representerer en del av dokumentet.
La oss se hvordan du kan bruke dette til å fange bare et spesifikt element i skjermbildet ditt.
Til ta et skjermbilde av et bestemt nettsideelement i Firefox, gjør følgende:
- Åpne ønsket side i Firefox og høyreklikk på elementet du vil fange.
- Fra kontekstmenyen velger du "Inspiser element":
- Inspektørverktøyet vil bli åpnet. Legg merke til at den har en brødsmulekontroll for DOM-trenodene:
- Der kan du høyreklikke på et hvilket som helst element og velge Skjermbilde node fra kontekstmenyen:
Dette er akkurat det vi trenger.
Det fine med denne funksjonen er at den også fanger opp lange elementer, inkludert de fleste elementer som krever rulling. I mitt tilfelle, her er hvordan skjermbildet ser ut:
Alternativt kan du bruke den innebygde skjermbilde kommando. Tidligere skrev jeg Hvordan ta et skjermbilde av den åpnede siden i Firefox. I den nevnte artikkelen brukte vi den innebygde Firefox-kommandoen "skjermbilde" for å fange hele siden. Den samme funksjonaliteten kan brukes til å skjermdumpe et spesifikt element på den åpnede siden.
- Åpne Firefox og trykk Shift + F2 på tastaturet. Firefox vil åpne en konsoll/kommandolinje nederst på skjermen.
- Skriv inn følgende kommando i den:
skjermbilde --velger "navn"
Erstatt navnet "porsjon" med det riktige velgernavnet. I mitt tilfelle burde det være det
skjermbilde --velger "#widget-apps > .iconlist > .iconlist-innhold > ul"
Den andre metoden er nyttig for webutviklere som kjenner den eksakte DOM-elementbanen. Den gjennomsnittlige brukeren vil åpenbart foretrekke den første metoden for å ta skjermbildet av et bestemt nettsideelement.
