Делайте полноразмерные скриншоты с прокруткой веб-страницы в Chrome
Оглавление:
Браузер Google Chrome предлагает два способа захвата полноразмерных скриншотов веб-страниц. Это может быть необходимо или полезно для многих веб-работников, будь то разработчики, дизайнеры, редакторы, менеджеры, писатели, аналитики или любой другой возможный веб-проект.
Подходы, которые мы рассмотрим для захвата полноразмерных снимков экрана веб-страницы с помощью Chrome, требуют полной версии Chrome для любого настольного устройства, включая Mac, Windows, Linux и Chromebook.Плагины не требуются, так как мы будем использовать встроенные инструменты разработчика с Chrome.
note, здесь мы рассматриваем браузер Chrome для настольных компьютеров. Вы также можете делать полноэкранные скриншоты страниц с помощью Firefox, Safari на Mac и Safari для iPhone и iPad, если вам это нужно или вы предпочитаете.
Как делать полноразмерные скриншоты с прокруткой в Chrome
Готовы сделать полноразмерный скриншот веб-страницы в Chrome? Вот что нужно сделать:
- Откройте Инструменты разработчика Chrome (Просмотр > Инструменты разработчика >)
- Нажмите кнопку «Режим адаптивного дизайна» в панели инструментов разработчика
- Прокрутите всю веб-страницу вниз, чтобы загрузить все изображения (это важно для захвата изображений с отложенной загрузкой — распространенного метода, используемого для ускорения веб-страниц)
- Нажмите на три вертикальные точки в правом верхнем углу инструмента адаптивного дизайна и выберите «Сделать полноразмерный снимок экрана»
- Скриншот в полном размере появится в папке загрузок Chrome по умолчанию
На Mac вы найдете полноразмерный снимок экрана веб-страницы, доступный в разделе «Загрузки пользователей», если вы не изменили его вручную.
Размеры захваченного снимка экрана будут различаться в зависимости от того, какое устройство вы выбрали в адаптивном режиме, например, если вы выбрали iPad Air и сделали полноразмерный снимок экрана с прокруткой домашней страницы osxdaily.com, ваш снимок экрана может быть около 2084 × 16439 пикселей. Очевидно, чем длиннее стиль страницы или
Если вы не прокручиваете всю веб-страницу, любые лениво загруженные изображения не будут захвачены снимком экрана, что сделает снимок экрана полной страницы неполным и не будет отражать то, что пользователь видит на странице.
Снимок экрана с полной страницей в Chrome через консоль
Еще один способ сделать полноразмерные снимки экрана в Chrome — использовать команду «Выполнить» в консоли разработчика и ввести «скриншот», а затем выбрать «Создать полноразмерный снимок экрана» из появившихся вариантов. Обязательно прокрутите всю веб-страницу, прежде чем сделать это.
Это может быть лучшим вариантом для некоторых пользователей, но немного сложнее для тех, кто менее знаком с командными строками.
Являются ли эти методы для Chrome проще, чем те, что доступны в Safari для Mac с инструментами разработчика? Или очень простой способ сделать полные снимки экрана веб-страницы на Mac с помощью Firefox? Или еще более простой способ сделать полностраничные скриншоты с помощью iPhone или iPad? Это зависит от вас, и это также, вероятно, зависит от того, какой браузер вы используете чаще всего, и от вашего владения каждым из них.