Делайте полноразмерные скриншоты с прокруткой веб-страницы в Chrome

Оглавление:

Anonim

Браузер Google Chrome предлагает два способа захвата полноразмерных скриншотов веб-страниц. Это может быть необходимо или полезно для многих веб-работников, будь то разработчики, дизайнеры, редакторы, менеджеры, писатели, аналитики или любой другой возможный веб-проект.

Подходы, которые мы рассмотрим для захвата полноразмерных снимков экрана веб-страницы с помощью Chrome, требуют полной версии Chrome для любого настольного устройства, включая Mac, Windows, Linux и Chromebook.Плагины не требуются, так как мы будем использовать встроенные инструменты разработчика с Chrome.

note, здесь мы рассматриваем браузер Chrome для настольных компьютеров. Вы также можете делать полноэкранные скриншоты страниц с помощью Firefox, Safari на Mac и Safari для iPhone и iPad, если вам это нужно или вы предпочитаете.

Как делать полноразмерные скриншоты с прокруткой в ​​Chrome

Готовы сделать полноразмерный скриншот веб-страницы в Chrome? Вот что нужно сделать:

  1. Откройте Инструменты разработчика Chrome (Просмотр > Инструменты разработчика >)
  2. Нажмите кнопку «Режим адаптивного дизайна» в панели инструментов разработчика
  3. Прокрутите всю веб-страницу вниз, чтобы загрузить все изображения (это важно для захвата изображений с отложенной загрузкой — распространенного метода, используемого для ускорения веб-страниц)
  4. Нажмите на три вертикальные точки в правом верхнем углу инструмента адаптивного дизайна и выберите «Сделать полноразмерный снимок экрана»
  5. Скриншот в полном размере появится в папке загрузок Chrome по умолчанию

На Mac вы найдете полноразмерный снимок экрана веб-страницы, доступный в разделе «Загрузки пользователей», если вы не изменили его вручную.

Размеры захваченного снимка экрана будут различаться в зависимости от того, какое устройство вы выбрали в адаптивном режиме, например, если вы выбрали iPad Air и сделали полноразмерный снимок экрана с прокруткой домашней страницы osxdaily.com, ваш снимок экрана может быть около 2084 × 16439 пикселей. Очевидно, чем длиннее стиль страницы или

Если вы не прокручиваете всю веб-страницу, любые лениво загруженные изображения не будут захвачены снимком экрана, что сделает снимок экрана полной страницы неполным и не будет отражать то, что пользователь видит на странице.

Снимок экрана с полной страницей в Chrome через консоль

Еще один способ сделать полноразмерные снимки экрана в Chrome — использовать команду «Выполнить» в консоли разработчика и ввести «скриншот», а затем выбрать «Создать полноразмерный снимок экрана» из появившихся вариантов. Обязательно прокрутите всю веб-страницу, прежде чем сделать это.

Это может быть лучшим вариантом для некоторых пользователей, но немного сложнее для тех, кто менее знаком с командными строками.

Являются ли эти методы для Chrome проще, чем те, что доступны в Safari для Mac с инструментами разработчика? Или очень простой способ сделать полные снимки экрана веб-страницы на Mac с помощью Firefox? Или еще более простой способ сделать полностраничные скриншоты с помощью iPhone или iPad? Это зависит от вас, и это также, вероятно, зависит от того, какой браузер вы используете чаще всего, и от вашего владения каждым из них.

Делайте полноразмерные скриншоты с прокруткой веб-страницы в Chrome