Screenshot z wykorzystaniem narzędzi deweloperskich

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: