Készítsen képernyőképet egy adott weboldalelemről a Firefoxban

Szeretnék megosztani veled egy remek trükköt a Mozilla Firefoxhoz, amely növelheti termelékenységét és időt takaríthat meg. Az interneten való böngészés közben néha meg szeretne osztani valamit barátaival úgy, hogy képernyőképet készít róla. De több lépésre van szükség ahhoz, hogy képernyőképet készítsen az egész oldalról, elmentse, levágja stb. Ebben a cikkben látni fogjuk, hogyan készíthet közvetlenül képernyőképet egy weboldal adott eleméről, bővítmények használata nélkül.

Amikor egy weboldal betöltődik, a webböngésző létrehozza az oldal dokumentumobjektum-modelljét. A DOM fastruktúraként épül fel, amelyben minden csomópont egy objektum, amely a dokumentum egy részét reprezentálja.

Nézzük meg, hogyan használhatja ezt arra, hogy csak egy adott elemet rögzítsen a képernyőképen.

Nak nek készítsen képernyőképet egy adott weboldalelemről a Firefoxban, tegye a következő lépéseket:

1. Nyissa meg a kívánt oldalt a Firefoxban, és kattintson jobb gombbal a rögzíteni kívánt elemre.
2. A helyi menüből válassza az "Elem ellenőrzése" lehetőséget:
3. Megnyílik az ellenőrző eszköz. Figyelje meg, hogy van egy navigációs útvonal-vezérlője a DOM-fa csomópontjaihoz:
4. Itt jobb gombbal bármelyik elemre kattinthat, és kiválaszthatja Képernyőkép Node a helyi menüből:Pontosan erre van szükségünk.

Ebben a funkcióban az a nagyszerű, hogy hosszú elemeket is rögzít, beleértve a legtöbb görgetést igénylő elemet is. Az én esetemben így néz ki a képernyőkép:

Alternatív megoldásként használhatja a beépített 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 Firefox beépített "screenshot" parancsát használtuk a teljes oldal rögzítésére. Ugyanez a funkcionalitás használható egy adott elem képernyőmentésére a megnyitott oldalon.

1. Nyissa meg a Firefoxot, és nyomja meg a gombot Shift + F2 a billentyűzeten. A Firefox megnyit egy konzolt / parancssort a képernyő alján.
2. Írja be a következő parancsot a belsejébe:

   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 --választó "#widget-apps > .iconlist > .iconlist-content > ul"

A második módszer azoknak a webfejlesztőknek hasznos, akik ismerik a DOM elem pontos elérési útját. Az átlagos felhasználó nyilvánvalóan előnyben részesíti az első módszert, amikor egy adott weboldal elemről készít képernyőképet.