Jak zrobić zrzut ekranu witryny o określonych wymiarach za pomocą przeglądarki Google Chrome

Jak zrobić zrzut ekranu w Google Chrome

Jeśli jesteś agencją lub firmą, która ma portfolio witryn lub stron, które chcesz udostępnić online, prawdopodobnie przeszedłeś przez ból związany z próbą uchwycenia mundurów screeny każdej z witryn.

Jeden z klientów, z którymi pracujemy, tworzy hostowane kompilacje Rozwiązania intranetowe które mogą być hostowane wewnętrznie w ramach firmy. Intranety są niezwykle pomocne dla firm w przekazywaniu wiadomości firmowych, rozpowszechnianiu informacji marketingowych, dostarczaniu informacji o korzyściach itp.

Pomogliśmy firmie OnSemble w migracji rozwiązania intranetowego z witryny internetowej firmy macierzystej. Był to obszerny projekt, który obejmował wszystko, od tworzenia nowych profili społecznościowych, aktualizowania Marketo, a następnie demontażu niektórych niestandardowych rozwiązań, które wykonali w przeszłości, aby połączyć swoje witryny.

Zrzuty ekranu klienta z Google Chrome

Możesz nie zdawać sobie z tego sprawy, ale możesz robić doskonałe zrzuty ekranu dzięki wbudowanemu zestawowi solidnych narzędzi programistycznych Google Chrome. Co ciekawe, nie jest to zbyt znana funkcja, mimo że ma niesamowitą elastyczność.

Oto krótki samouczek wideo pokazujący, jak zrobić idealny zrzut ekranu strony internetowej w odpowiednim rozmiarze za pomocą przeglądarki Google Chrome:

Kroki, aby zrobić zrzut ekranu w Google Chrome

Narzędzia programistyczne Google Chrome mają opcję podglądu witryny za pomocą paska narzędzi urządzenia. Narzędzie zostało zbudowane, aby programiści mogli zobaczyć, jak witryna wygląda w różnych rozmiarach widocznych na różnych urządzeniach… ale zdarza się również, że jest to doskonały sposób na uzyskanie idealnego zrzutu ekranu strony internetowej.

W tym przypadku chcemy, aby każdy z kluczowych klientów OnSemble z różnych branż, który zbudował piękne witryny intranetowe, wykonał zrzut ekranu, abyśmy mogli wyświetlić je wszystkie w portfolio na ich stronie internetowej. Chcemy, aby strony miały szerokość 1200 pikseli i wysokość 800 pikseli. Do osiągnięcia tego:

  1. W skrajnym prawym przycisku nawigacyjnym (3 kropki w pionie) wybierz Dostosuj i steruj menu.

Menu narzędzi programistycznych w przeglądarce Google Chrome

  1. Wybierz Więcej narzędzi> Narzędzia dla programistów

Narzędzia dla programistów z Google Chrome

  1. Przełącz opcję Pasek narzędzi urządzenia aby wyświetlić opcje i wymiary urządzenia.

Przełącz pasek narzędzi urządzenia z Google Chrome

  1. Ustaw pierwszą opcję na Czuły, a następnie ustaw wymiary na 1200 x 800 i naciśnij Enter. Strona zostanie teraz wyświetlona z tymi wymiarami.

Responsywny pasek narzędzi urządzenia Google Chrome

  1. Po prawej stronie paska narzędzi urządzenia kliknij przycisk nawigacji (3 pionowe kropki) i wybierz Zrzut ekranu.

Zrób zrzut ekranu za pomocą przeglądarki Google Chrome

  1. Google Chrome wykona doskonały zrzut ekranu i umieści go w Twoim Pliki do ściągnięcia folder, do którego możesz dołączyć i wysłać w e-mailu. Pamiętaj, aby nie wybierać zrzutu ekranu w pełnym rozmiarze, ponieważ zajmie to całą długość strony i zignoruje limit wysokości.

Skróty klawiaturowe Google Chrome do zrzutów ekranu

Jeśli jesteś mistrzem skrótów klawiaturowych, możesz po prostu zrobić zrzut ekranu całej strony za pomocą tych skrótów. Nie podoba mi się to podejście, ponieważ nie mogę ustawić maksymalnej wysokości widocznego obszaru… ale przydaje się, jeśli kiedykolwiek potrzebowałeś zrzutu całej strony.

Skróty klawiaturowe na komputerze Mac:

1. Alt + Command + I 
2. Command + Shift + P

Skróty klawiaturowe włączone w systemie Windows lub Linux:

1. Ctrl + Shift + I 
2. Ctrl + Shift + P

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.