Pořiďte snímek obrazovky konkrétního prvku webové stránky ve Firefoxu

Rád bych se s vámi podělil o skvělý trik pro Mozilla Firefox, který může zvýšit vaši produktivitu a ušetřit váš čas. Při procházení webu si občas přejete něco sdílet se svými přáteli tím, že si z toho uděláte snímek obrazovky. Pořídit snímek obrazovky celé stránky, uložit jej, oříznout atd. však vyžaduje několik kroků. V tomto článku uvidíme, jak přímo pořídit snímek obrazovky konkrétního prvku na webové stránce bez použití doplňků.

Když se webová stránka načte, váš webový prohlížeč vytvoří objektový model dokumentu stránky. DOM je konstruován jako stromová struktura, kde každý uzel je objekt představující část dokumentu.

Podívejme se, jak to můžete použít k zachycení pouze konkrétního prvku na snímek obrazovky.

Na pořiďte snímek obrazovky konkrétního prvku webové stránky ve Firefoxu, proveďte následující kroky:

1. Otevřete požadovanou stránku ve Firefoxu a klikněte pravým tlačítkem na prvek, který chcete zachytit.
2. Z kontextové nabídky vyberte "Zkontrolovat prvek":
3. Otevře se nástroj inspektor. Všimněte si, že má ovládací prvek drobečkové navigace pro uzly stromu DOM:
4. Zde můžete kliknout pravým tlačítkem na libovolný prvek a vybrat si Screenshot Node z kontextového menu:To je přesně to, co potřebujeme.

Skvělé na této funkci je, že zachycuje i dlouhé prvky, včetně většiny prvků, které vyžadují rolování. V mém případě vypadá snímek obrazovky takto:

Případně můžete použít vestavěný Snímek obrazovky příkaz. Dříve jsem psal Jak pořídit snímek obrazovky otevřené stránky ve Firefoxu. Ve zmíněném článku jsme použili vestavěný příkaz Firefoxu „screenshot“ k zachycení celé stránky. Stejnou funkcionalitu lze použít k pořízení snímku obrazovky konkrétního prvku na otevřené stránce.

1. Otevřete Firefox a stiskněte Shift + F2 na klávesnici. Firefox otevře konzolu / příkazový řádek v dolní části obrazovky.
2. Zadejte do něj následující příkaz:

   snímek obrazovky --selektor "jméno"

   Nahraďte název "část" příslušným názvem voliče. V mém případě by to tak mělo být

   snímek obrazovky --selector "#widget-apps > .iconlist > .iconlist-content > ul"

Druhá metoda je užitečná pro webové vývojáře, kteří znají přesnou cestu prvku DOM. Průměrný uživatel bude zjevně preferovat první metodu pořízení snímku obrazovky konkrétního prvku webové stránky.