Snímek obrazovky pořizuje vysoce kvalitní obrázky libovolné webové stránky ve dvou režimech: viditelná oblast (přesně to, co vidíte v okně prohlížeče) nebo celá stránka (odshora dolů, včetně obsahu mimo viditelnou část). Snímky se ukládají jako vysoce rozlišené PNG soubory a okamžitě se stahují do vašeho zařízení — žádné nahrávání do cloudu, žádné účty, žádné čekání.
Nativní snímky obrazovky pořízené nástroji operačního systému (jako Cmd+Shift+4 nebo Nástroj Výstřižky) zachytí celou obrazovku včetně rozhraní prohlížeče, panelů nástrojů a dalších oken. Obsah pod ohybem stránky (below the fold) tímto způsobem zachytit nejde. Nástroj Screenshot v DevSuite řeší oba problémy najednou – zachytí pouze obsah webové stránky (bez rozhraní prohlížeče) a dokáže projet celou stránku scrollováním, aby vytvořil jeden souvislý snímek celé stránky.
Režim viditelné oblasti využívá nativní zachytávací API Chromu pro dokonale přesný výsledek na úrovni jednotlivých pixelů. Režim celé stránky automaticky posouvá stránku, zachycuje jednotlivé dlaždice viewportu a spojuje je do jednoho souvislého obrázku. Výstupem je PNG v plném rozlišení (odpovídajícím device pixel ratio vašeho displeje), takže snímky jsou ostré i na Retina a jiných displejích s vysokou hustotou pixelů.
Pevně umístěné a přilepené prvky (hlavičky, cookie lišty, chatovací widgety) jsou při zachytávání celé stránky ošetřeny automaticky: protože nástroj posouvá skutečnou stránku místo skládání dlaždic z headless rendereru, cokoliv připnutého k viewportu se zachytí jen jednou na správné pozici, místo aby se opakovalo na každé dlaždici. Líně načítané (lazy-loaded) obrázky a obsah, který se vykreslí až po scrollu do zobrazitelné oblasti, se přirozeně spustí, jak zachytávání stránkou postupuje – výsledný obrázek proto odpovídá tomu, co by viděl skutečný návštěvník, a ne prázdné mřížce zástupných symbolů, což je zásadní zejména u obrázkově bohatých vstupních stránek a dlouhých článků.
Zachytí přesně to, co je viditelné ve viewportu prohlížeče — přesný obdélník obsahu, který uživatel vidí. Žádné lišty prohlížeče, žádné panely nástrojů, žádné posuvníky. Pouze čistý obsah webové stránky tak, jak se zobrazuje na obrazovce. Jedno kliknutí a okamžité zachycení.
Zachytí celou stránku od úplného vrchu až po úplné dno, včetně veškerého obsahu mimo viditelnou oblast. Nástroj automaticky roluje stránku, zachycuje jednotlivé sekce a spojuje je do jednoho souvislého, plynulého obrázku. Funguje na stránkách libovolné délky.
Snímky jsou pořizovány v nativním poměru pixelů vašeho displeje (2x na Retina, 1,5x na některých Windows displejích). Výsledek je ostrý obrázek ve vysokém rozlišení, který zůstává ostrý i při přiblížení — ne rozmazané zvětšení, jaké dostanete ze systémových snímků obrazovky.
Zachycený obrázek se uloží jako bezeztrátový PNG soubor a okamžitě se stáhne přímo do vašeho zařízení. Žádné nahrávání do cloudu, žádné čekání na zpracování, žádný účet není vyžadován. Soubor se objeví ve složce Stažené během několika sekund.
Zachycení obsahuje pouze obsah webové stránky — žádné karty prohlížeče, adresní řádek, panel záložek ani panel rozšíření. Výstup vypadá přesně tak, jak by stránka vypadala, kdyby uživatelské rozhraní prohlížeče neexistovalo.
Zachytí jakoukoli webovou stránku bez ohledu na to, jak je vytvořena — statické HTML, SPA (React, Vue), stránky s lazy-loaded obrázky, nekonečným rolováním, sticky hlavičkami a prvky s fixed pozicí. Režim celé stránky si s nimi všemi poradí.
Pořizujte snímky celých stránek webů, které jste navrhli nebo vyvinuli, pro své portfolio. Režim celé stránky vám poskytne kompletní, souvislý obrázek celého designu stránky — ideální pro Behance, Dribbble nebo případové studie portfolia.
Při hlášení chyby má snímek obrazovky cenu tisíce slov. Zachyťte přesný viewport s problémem nebo snímek celé stránky ukazující, jak chyba ovlivňuje celé rozložení. Připojte ho k issue na GitHubu nebo ticketu v Jira.
Zachytěte aktuální stav stagingové stránky pro revizi zainteresovanými stranami. Snímky celé stránky umožňují klientům vidět kompletní design, aniž by museli sami navštěvovat stránku — užitečné pro revize s netechnickými stakeholdery.
Pořiďte snímek před provedením změn a další po změnách. Porovnejte oba obrázky vedle sebe a ověřte, že vaše úpravy CSS nebo rozložení vypadají správně na celé stránce, nejen v sekci, na kterou jste se zaměřili.
Vytvářejte čisté, profesionální obrázky webových stránek pro blogové příspěvky, tweety nebo prezentace. Výstup bez panelů nástrojů a bez lišt prohlížeče vypadá upraveně a profesionálně — není třeba ořezávat uživatelské rozhraní prohlížeče.
Otevřete dock nebo popup DevSuite Pro a klikněte na ikonu Snímek obrazovky. Objeví se výběr režimu se dvěma možnostmi: „Viditelná oblast“ a „Celá stránka“.
Klikněte na „Viditelná oblast“ pro zachycení aktuálního viewportu (to, co právě vidíte), nebo na „Celá stránka“ pro zachycení celé stránky odshora dolů.
Zachycení viditelné oblasti je okamžité (pod 1 sekundu). Zachycení celé stránky trvá několik sekund, protože nástroj roluje a spojuje jednotlivé části. Indikátor průběhu zobrazuje stav zachycení.
Zachycený obrázek se automaticky stáhne jako PNG soubor. Zkontrolujte složku Stažené ve vašem prohlížeči. Soubor je pojmenován podle názvu stránky a časové značky.
Nástroj zůstává aktivní i po každém zachycení. Pořizujte další snímky stejné nebo jiné stránky bez nutnosti znovu aktivovat nástroj. Rolujte, proveďte změny a zachyťte znovu.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
