Hlavní navigace

Chrome umí z příkazové řádky pořídit screenshot nebo PDF

17. 1. 2019
Doba čtení: 2 minuty

Sdílet

Chrome má od verze 59 možnost takzvaného headless běhu. Bezhlavý prohlížeč sice nic přímo neukazuje, má ale všechny své běžné funkce. Umí tedy vyrenderovat stránku do obrázku, uložit ji jako PDF nebo vypsat DOM.

Chrome od verze 59 umožňuje ovládání z příkazové řádky. Můžete tak prohlížeč využívat ve svých skriptech, pořizovat s ním screenshoty stránek, ukládat DOM do souboru a podobně. Ukážeme si základní použití tohoto rozhraní a také to, k čemu by se vám mohlo hodit.

Pro toto bezhlavé použití (headless) je potřeba spustit prohlížeč s parametrem, který vypne grafický výstup. Stránka se načte, kompletně vyrenderuje a prohlížeč se ukončí.

# google-chrome --headless https://www.root.cz/

To může být samo o sobě užitečné, pokud potřebujeme odněkud simulovat uživatelský přístup na danou stránku. Bez výstupu nám to ale příliš neposlouží. Když ale nemůžeme na obrazovku, můžeme do souboru.

Uložení screenshotu

Velmi užitečnou funkcí je uložení obrázku vyrenderované stránky. Základní použití je jednoduché:

$ google-chrome --headless --screenshot https://www.root.cz/

Takto se do aktuálního pracovního adresáře uloží obrázek ve formátu PNG, jeho název můžete ovlivnit tak, že parametr rozšíříte například na --screenshot=obrazek.png. Sejmutý obrázek pochází ve výchozím stavu z virtuálního okna v rozlišení 800×600. To není pro dnešní web příliš mnoho, velikost je možné velmi snadno upravovat pomocí dalšího parametru:

$ google-chrome --headless --screenshot --window-size=1920,1080 https://www.root.cz/

Získáte tak obrázek ve full HD:

Stejně můžete například simulovat pohled na stránku z mobilního telefonu, dokumentace doporučuje například rozlišení 412×732 pro pohled z telefonu Nexus 5X. Samozřejmě si dostatečně vysokým obrázkem můžete vytvořit dlouhý screenshot celé webové stránky.

Vytvoření PDF

Podobně je možné si nechat uložit výstup do PDF, krásně se vám tak vytvoří soubor připravený k tisku, protože se použijí tiskové styly, které obvykle odstraňují ze stránky přebytečné objekty. Použití je velmi podobné jako u screenshotů. Název souboru je opět volitelný:

$ google-chrome --headless --print-to-pdf=clanek.pdf https://www.root.cz/clanky/…

Uložení DOM

Chrome vám na řádce umí také uložit zpracovaný DOM, konkrétně obsah document.body.innerHTML. Tentokrát se však výstup neukládá do souboru, ale vypíše se na standardní výstup. Je proto rozumné si ho přesměrovat do nějakého vlastního souboru.

$ google-chrome --headless --dump-dom https://www.root.cz/ > dom.txt

Dálkový debugging

Chrome umožňuje také přímé dálkové ovládání, kdy se výstup posílá do jiného prohlížeče po síti. Pro spuštění je potřeba na vzdálené straně zavolat:

UX DAy - tip 2

$ google-chrome --headless --remote-debugging-port=9222 https://www.root.cz

Prohlížeč zůstane spuštěný a otevře si lokální TCP port 9222. Na něm pak umí odpovídat pomocí protokolu DevTools. Pokud se na něj připojíte jiným prohlížečem, uvidíte živý streamovaný výstup ze zobrazeného webu (lze vypnout) a hlavně nástroje pro vývojáře, kterými můžete vzdáleně načtenou webovou stránku ladit.

Pokud potřebujete s Chrome automatizovat nějaké akce, můžete využít knihovnu Puppeteer. Ta nabízí vysokoúrovňové API, které umožňuje pořizovat obrázky, PDF, automaticky se po stránkách pohybovat a zjišťovat o nich informace. Kromě toho existuje také nízkoúrovňová knihovna CRI, která nabízí těsnější spolupráci s protokolem DevTools.

Zdroje

Byl pro vás článek přínosný?

Autor článku

Petr Krčmář pracuje jako šéfredaktor serveru Root.cz. Studoval počítače a média, takže je rozpolcen mezi dva obory. Snaží se dělat obojí, jak nejlépe umí.