V tomto článku vám ukážeme, ako urobiť snímky obrazovky konkrétnych prvkov webovej stránky alebo celej webovej stránky pomocou nástrojov pre vývojárov Google Chrome.
Téma obsahu:
- Otvorenie nástrojov pre vývojárov Google Chrome
- Výber konkrétneho prvku z webovej stránky pomocou nástrojov pre vývojárov Google Chrome
- Vytváranie snímok obrazovky prvkov webovej stránky pomocou nástrojov pre vývojárov Google Chrome
- Vytváranie snímok obrazovky celej webovej stránky pomocou nástrojov pre vývojárov Google Chrome
- Záver
- Referencie
Otvorenie nástrojov pre vývojárov Google Chrome
Ak chcete otvoriť Nástroje pre vývojárov Google Chrome, spustite prehliadač Google Chrome, navštívte webovú stránku, z ktorej chcete urobiť snímky obrazovky, a stlačte
Ak potrebujete pomoc pri otváraní nástrojov pre vývojárov Google Chrome, prečítajte si článok na Ako otvoriť Nástroje pre vývojárov Google Chrome .
Výber konkrétneho prvku z webovej stránky pomocou nástrojov pre vývojárov Google Chrome
Ak chcete urobiť snímky obrazovky konkrétneho prvku z webovej stránky pomocou nástrojov pre vývojárov Google Chrome, musíte mať možnosť vybrať prvok, z ktorého chcete urobiť snímky obrazovky z webovej stránky.
Element z webovej stránky môžete vybrať na karte „Elements“ v nástrojoch Google Chrome Developer Tools.
Na výber prvku z webovej stránky môžete použiť aj nástroj „Inspect“ v nástroji Google Chrome Developer Tools.
Ak chcete použiť nástroj na kontrolu, kliknite na
z ľavého horného rohu Nástrojov pre vývojárov Google Chrome.
Vyberte prvok, z ktorého chcete urobiť snímku obrazovky z webovej stránky. Po výbere prvku by sa na karte „Prvky“ mala automaticky vybrať aj sekcia kódu HTML.
Vytváranie snímok obrazovky prvkov webovej stránky pomocou nástrojov pre vývojárov Google Chrome
Ak chcete urobiť snímku obrazovky vybratého prvku webovej stránky, kliknite pravým tlačidlom myši (RMB) na vybratý nadradený prvok HTML na karte „Prvky“ a kliknite na „Zachytiť snímku obrazovky uzla“.
Snímka obrazovky vybratého prvku webovej stránky by sa mala urobiť a uložiť do počítača.
Ako vidíte, snímka obrazovky vybratého prvku webovej stránky bola úspešne nasnímaná.
Skúsme urobiť snímku obrazovky iného prvku webovej stránky pomocou nástrojov Google Chrome Developer Tools.
Vyberte obsah v jednom z článkov LinuxHint, kliknite naň pravým tlačidlom myši (RMB) a kliknite na „Snímka obrazovky uzla Capture“, aby ste urobili snímku obrazovky rovnako ako nedávno.
Teraz sa vytvorí a uloží snímka obrazovky.
Ako vidíte, vytvorí sa snímka obrazovky iba obsahu.
Vytváranie snímok obrazovky celej webovej stránky pomocou nástrojov pre vývojárov Google Chrome
Ak chcete urobiť snímku obrazovky celej webovej stránky, prejdite na kartu „Prvky“ v nástrojoch Google Chrome Developer Tools. Prejdite úplne nahor a vyberte značku html. Týmto sa vyberie celá webová stránka.
Teraz kliknite pravým tlačidlom myši (RMB) na značku html a kliknite na „Zachytiť snímku obrazovky uzla“.
Mala by sa urobiť snímka obrazovky celej webovej stránky a uložiť ju do počítača.
Ako vidíte, snímka obrazovky celej webovej stránky bola úspešne nasnímaná.
Záver
Ukázali sme vám, ako otvoriť Nástroje pre vývojárov Google Chrome. Ukázali sme vám tiež, ako vybrať konkrétne prvky webovej stránky pomocou nástroja na kontrolu nástrojov pre vývojárov Google Chrome a ako pomocou nástrojov pre vývojárov Google Chrome vytvoriť snímky obrazovky konkrétnych prvkov webovej stránky a celej webovej stránky.