Как сделать скриншот всей страницы?

1 486

Всем привет. С вами Corvax. Очень часто в работе разработчика приходится взаимодействовать с членами команды и отсылать им скриншоты экрана, дабы показать нужную часть интерфейса для проведения нужных правок или оценки. С этой задачей легко может справится обычный Print Screen либо такие программы как Joxi или Lightshot. Но что делать если нужен скриншот целой страницы, да еще и в хорошем качестве? В этой статье я постараюсь ответить на эти вопрос, не используя каких-либо плагинов кроме стандартно входящих в инструменты современного браузера. Поехали.

Firefox

Начну с браузера Firefox. Используем DevTools (панель инструментов разработчиков) кликаем на значок “Настройки инструментов” и в разделе “Доступные кнопки инструментов” ставим галочку “Сделать скриншот всей странице”. В результате в DevTools рядом с кнопкой настроек появляется новая кнопка “Сделать скриншот всей страницы” при нажатие на которую у нас будет производиться скриншот всего экрана.

Chrome

Начиная с Chrome (с версии 59) в DevTools предусмотрена возможность делать скриншоты экрана в двух режимах. Давайте рассмотрим это поподробнее.

Включим DevTools и перейдем в режим проверки “адаптивного дизайна”. В правом верхнем углу нажмем на тогл (три точки) и в выпадающем меню выберем нужный нам режим скриншота: часть экрана (capture screenshot) или полный экран (capture full size screenshot). В результате вашего выбора на “локаль” сохранится скриншот в формате .png. Важно понимать, что в режиме “адаптивного дизайна” можно выбирать произвольную ширину, либо установленную ширину по выбранному девайсу (iphone5s, iphone6 и т.д.) что повлияет в итоге на полученный скриншота.

Safari

В Safari что бы сделать скриншот достаточно перейти в Файл-> Экспортировать как PDF. В результате чего мы получим в формате PDF скриншот старицы. К сожалению этот способ не является удобным т.к. мы получаем PDF файл который разбит на страницы и его не так удобно передавать и использовать, как обычный “скрин” в формате png. Я бы рекомендовал использовать в Safari дополнительные плагины такие как Awesome Screenshot, BrowseShot или Paparazzi!.

Заключение

Вот и подошла к концу эта небольшая статья. Я надеюсь, что мне удалось дать вам кусочек полезной информации. Помните, всегда пользуйтесь теми инструментами, которые удобны именно вам. С вами был Corvax. Оставляйте ваши комментарии, учитесь, развивайтесь и успехов вам дорогие друзья.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *