Перейти к основному содержанию

Скриншот сайта с помощью Google Chrome

Google Chrome

Иногда нужно получить скриншот сайта. Не просто изображение экрана, а именно весь сайт целиком. Или изображение страницы сайта, как оно выглядит на планшете или телефоне.

Это может быть востребовано для веб-разработчиков, верстальщиков, менеджеров проекта, владельцев сайтов, UI и UX дизайнерам, юзабилити-специалистам. И все они толпой приходят к сисадмину с вопросом, как сделать такой скриншот?

Можно, конечно, сделать кучу картинок, а потом склеивать их в редакторе. Но это не наш метод, воспользуемся возможностями браузера Google Chrome. Дополнительных расширений устанавливать не придётся.

Открываем в Google Chrome требуемый сайт.

screen

Переходим в консоль разработчика: F12 или Ctrl + Shift + i или Меню → Дополнительные инструменты → Инструменты разработчика.

chrome

Переключаемся в режим эмуляции мобильных устройств с помощью иконки в виде планшета с телефоном (слева внизу) или Ctrl + Shift + m.

chrome

Ползунками устанавливаем необходимые размеры экрана, или указываем необходимый размер, или выбираем мобильное устройство из списка. К примеру, выберу iPhone 12 Pro.

screen

Теперь сайт отображается так, как он бы выглядел на iPhone. В правом верхнем углу нажимаем иконку в виде трёх вертикальный точек, отображается дополнительное меню. Выбираем Capture full size screenshot.

screen

Google Chrome немного подумает и выплюнет PNG картинку с полным скриншотом нашего сайта от заголовка до футера.

screen

Ссылки

Скриншот сайта с помощью Mozilla Firefox

Теги

 

Похожие материалы

Drupal 8-9 — добавляем блок "Поделиться" в статьи

Добавим блок "Поделиться" в статьи и страницы нашего сайта. Для начала вам нужно сгенерировать HTML код блока. Вы можете воспользоваться многочисленными сервисами в Интернете. Я использую блок от Яндекса.

Теги

Opera — браузер для Windows Vista и XP

Ставил себе недавно ОС Windows Vista. В комплекте с операционной системой (после установки всех обновлений) идёт браузер Internet Explorer 9. Далеко не самая последняя версия, и не самая безопасная. В качестве альтернативного варианта хотелось бы рассмотреть что-то иное. Ставим Оперу!

Теги