Szeretnék megosztani veletek egy jó trükköt a Mozilla Firefox számára, amely növelheti a termelékenységet és időt takaríthat meg. Webes szörfözés közben néha meg akar osztani valamit barátaival egy képernyőkép elkészítésével. De több lépésre van szükség az egész oldal képernyőképének elkészítéséhez, mentéséhez, kivágásához stb. Ebben a cikkben megtudjuk, hogyan készíthet közvetlenül képernyőképet egy adott elemről egy weboldalon, kiegészítők használata nélkül.
Reklám
Egy weboldal betöltése közben a webböngésző létrehozza az oldal Dokumentum objektum modelljét. A DOM fa szerkezetként van felépítve, ahol minden csomópont a dokumentum egy részét képviselő objektum.
Nézzük meg, hogyan használhatja ezt csak egy adott elem rögzítésére a képernyőképre.
Nak nek készítsen képernyőképet egy adott weboldal eleméről a Firefoxban , hajtsa végre a következő lépéseket:
- Nyissa meg a kívánt oldalt a Firefoxban, és kattintson a jobb gombbal a rögzíteni kívánt elemre.
- A helyi menüből válassza az „Elem ellenőrzése” lehetőséget:
- Megnyílik az ellenőr eszköz. Figyelje meg, hogy a DOM fa csomópontjai számára van egy vezérlőpanel:
- Itt jobb egérgombbal kattinthat bármely elemre, és választhat Pillanatkép csomópont a helyi menüből:Pontosan erre van szükségünk.
A funkció nagyszerű tulajdonsága, hogy hosszú elemeket is rögzít, beleértve a legtöbb görgetést igénylő elemet. Esetemben a kép képernyőképe így néz ki:
Alternatív megoldásként használhatja a beépítettet is képernyőkép parancs. Korábban írtam Hogyan készítsünk képernyőképet a megnyitott oldalról a Firefoxban . Az említett cikkben a beépített Firefox „screenshot” parancsot használtuk az egész oldal rögzítéséhez. Ugyanez a funkcionalitás használható egy adott elem képernyőképének megnyitására a megnyitott oldalon.
- Nyissa meg a Firefoxot, és nyomja meg az gombot Shift + F2 a billentyűzeten. A Firefox megnyit egy konzolt / parancssort a képernyő alján.
- Írja be a következő parancsot:
képernyőkép - választó 'név'
Cserélje ki az „adag” nevet a megfelelő választó nevére. Az én esetemben annak kellene lennie
képernyőkép - selector '# widget-apps> .iconlist> .iconlist-content> ul'
A második módszer hasznos azoknak a webfejlesztőknek, akik ismerik a pontos DOM elem elérési útját. Az átlagos felhasználó nyilvánvalóan előnyben részesíti az első módszert egy adott weboldal elemének képernyőképének elkészítésére.