Czasami może zaistnieć potrzeba wykonania screenshota naszej strony www czy też aplikacji webowej. Narzędzia deweloperskie przeglądarki Google Chrome posiadają szereg przydatnych komend, które mogą nam w tym pomóc. W tym celu wpierw musimy je otworzyć. Można to zrobić za pomocą skrótu klawiszowego Option + ⌘ + J (MacOS), Shift + CTRL + J (Windows) czy też korzystając z nawigacji przeglądarki:
W momencie, w którym mamy otwarte narzędzia deweloperskie możemy skorzystać ze skrótu ⌘ + Shift + P (MacOS), Ctrl + Shift + P (Windows) lub korzystając z nawigacji w oknie aby uruchomić wyszukiwarkę komend:
Mając w tym momencie dostęp do wyszukiwarki komend możemy wpisać słowo screenshot
i naszym oczom powinny ukazać się cztery komendy:
Screenshot obszaru
Pierwsza komenda Capture area screenshot
pozwala nam zaznaczyć konkretny obszar i wykonać dla niego zrzut ekranu:
Screenshot całej strony
Do wykonania tej akcji służy komenda Capture full size screenshot
i generuje ona zrzut całej strony. W przypadku https://1024bits.pl
takowy zrzut na dzień dzisiejszy wygląda następująco:
Screenshot widocznej części strony
Komenda Capture screenshot
tworzy zrzut ekranu dla tej części strony, którą akurat mamy przed oczami. Przykładowo może to być następujący obszar (zaznaczony czerwonym obrysem:
Screenshot danego elementu DOM
To jest chyba najciekawsza odmiana komendy służącej do generowania zrzutów ekranu. Pozwala ona tworzyć zrzut ekranu dla określonego elementu HTML. W tym celu należy zaznaczyć taki element w zakładce Elements
i uruchomić komendę Capture node screenshot
:
W naszym przypadku powinniśmy uzyskać poniższy wynik: