Faceți o captură de ecran a unui anumit element de pagină web în Firefox

Aș dori să vă împărtășesc un truc interesant pentru Mozilla Firefox, care vă poate crește productivitatea și vă poate economisi timp. În timp ce navighezi pe web, uneori vrei să partajezi ceva prietenilor tăi făcând o captură de ecran a acestuia. Dar este nevoie de mai mulți pași pentru a face o captură de ecran a întregii pagini, a o salva, a o decupa etc. În acest articol, vom vedea cum să facem direct o captură de ecran a unui anumit element de pe o pagină web fără a utiliza suplimente.

Când o pagină web este încărcată, browserul dvs. web creează un model de obiect document al paginii. DOM-ul este construit ca o structură arborescentă în care fiecare nod este un obiect care reprezintă o parte a documentului.

Să vedem cum poți folosi acest lucru pentru a captura doar un anumit element în captura de ecran.

La faceți o captură de ecran a unui anumit element de pagină web în Firefox, faceți următorii pași:

1. Deschideți pagina dorită în Firefox și faceți clic dreapta pe elementul pe care doriți să îl capturați.
2. Din meniul contextual, selectați „Inspectați elementul”:
3. Instrumentul de inspecție va fi deschis. Observați că are un control breadcrumb pentru nodurile arborelui DOM:
4. Acolo, puteți face clic dreapta pe orice element și puteți alege Captură de ecran Node din meniul contextual:Este exact ceea ce avem nevoie.

Lucrul grozav al acestei funcții este că surprinde și elemente lungi, inclusiv majoritatea elementelor care necesită derulare. În cazul meu, iată cum arată captura de ecran:

Alternativ, puteți utiliza sistemul încorporat captură de ecran comanda. Mai devreme, am scris Cum să faci o captură de ecran a paginii deschise în Firefox. În articolul menționat, am folosit comanda încorporată în Firefox „captură de ecran” pentru a captura întreaga pagină. Aceeași funcționalitate poate fi folosită pentru a capta ecranul unui anumit element din pagina deschisă.

1. Deschide Firefox și apasă Shift + F2 pe tastatură. Firefox va deschide o consolă/linie de comandă în partea de jos a ecranului.
2. Tastați următoarea comandă în interiorul acesteia:

   captură de ecran --selector „nume”

   Înlocuiți numele „porțiune” cu numele selectorului corespunzător. În cazul meu, ar trebui să fie

   captură de ecran --selector „#widget-apps > .iconlist > .iconlist-content > ul”

A doua metodă este utilă pentru dezvoltatorii web care cunosc calea exactă a elementului DOM. Utilizatorul obișnuit va prefera în mod evident prima metodă de a face captură de ecran a unui anumit element de pagină web.