Zrób zrzut ekranu strony internetowej z ramką urządzenia w Chrome

Mniej znaną funkcją przeglądarki Google Chrome w systemach operacyjnych na komputery stacjonarne jest możliwość robienia zrzutu ekranu otwartej strony, tak jakby zrzut ekranu dotyczył przeglądarki działającej na urządzeniu mobilnym. Może nawet dodać ramkę wokół zrzutu ekranu, aby wyglądał jak realistyczne zdjęcie smartfona. Oto jak można to zrobić.

W Narzędziach dla programistów Chrome jest specjalne narzędzie, które umożliwia emulację urządzenia mobilnego. Dla programistów bardzo przydatne jest sprawdzanie, jak ich strony internetowe wyglądają na smartfonach i urządzeniach z małym ekranem. Pozwala określić niestandardowy rozmiar ekranu lub użyć predefiniowanych rozmiarów urządzeń, takich jak iPhone, iPad, Nexus lub Samsung Galaxy. Gdy otwarta strona zostanie wyświetlona w emulatorze urządzenia, użytkownik może zrobić zrzut ekranu strony. Możliwe jest również włączenie ramki urządzenia wokół strony, aby wyglądała jak realistyczne zdjęcie.

Możesz to zrobić w następujący sposób.

1. Otwórz żądaną stronę w Chrome i naciśnij F12. Otworzy się Narzędzia dla programistów:
2. Kliknij przycisk emulatora urządzenia mobilnego, aby przełączyć tryb narzędzi programistycznych:
3. W selektorze urządzeń wybierz jakieś urządzenie. Na przykład wybiorę iPhone'a 6:
4. Teraz kliknij menu z trzema kropkami po prawej stronie selektora urządzeń i zaznacz opcję „Pokaż ramkę urządzenia”:
5. Voila, teraz twoja strona internetowa jest wyświetlana w ładnej ramce urządzenia:
   
   Teraz kliknij ponownie menu z trzema kropkami i wybierz „Zrób zrzut ekranu”:

Wynik będzie następujący:

Skończyłeś.