6 способов сделать длинный скриншот (всей страницы)
Иван Иваничев
27 января, 2022
Chrome DevTools GoFullPage Awesome Screenshot FireShot FastStone Capture ScreenshotMachine
Мы в Telegram
В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.
Не всегда на серьёзных щах — шуточки тоже шутим =)
Подписаться
Станьте email-рокером 🤘
Пройдите бесплатный курс и запустите свою первую рассылку
Подробнее
С простыми скриншотами всё просто.
Чтобы сделать снимок экрана, можно использовать стандартную кнопку Print Screen или специальную программу вроде Lightshot.
Но если нужно сфотографировать лендинг или веб-версию email-рассылки, — то есть сразу нескольких экранов, — обычный способ плохо подходит. Неудобно делать снимок → сохранять → скроллить → делать снимок … объединять в редакторе несколько скриншотов в одну картинку.
Чтобы быстро заскриншотить страницу целиком, есть несколько решений.
Chrome DevTools
Что это: внутренний инструмент браузера Chrome.
Стоимость: бесплатно.
В самом популярном браузере можно сделать скриншот всей страницы даже без установки дополнительных программ и расширений.
Для начала нужно открыть нужный сайт, затем «Инструменты разработчика»: через меню «Дополнительные инструменты» или комбинацию «Ctrl + Shift + I».
Дальше нужно кликнуть на три вертикальные точки, чтобы вызвать меню «Инструментов разработчика», и нажать на «Run Command». Или открыть соответствующее окно другой комбинацией — «Ctrl + Shift + P».
Если начать набирать «screen…», появляется подсказка «Capture full size screenshot». Остаётся выбрать эту команду и немного подождать. Браузер сделает скриншот целой страницы и скачает его в формате png.
Таким же способом можно заскриншотить мобильную версию сайта. Только перед выполнением команды нужно нажать на иконку в левом верхнем углу, которая называется «Toggle device toolbar», или воспользоваться горячими клавишами «Ctrl + Shift + M». Над страницей появится панель, где можно выбрать нужное устройство или самостоятельно указать размер экрана.
А как сделать длинный скриншот в других браузерах?
В Safari похожая система: нужно выбрать в меню «Разработка → Показать веб-инспектор», затем кликнуть правой кнопкой на первый тег «html» в коде страницы и нажать на «Сделать снимок экрана».
В браузере «Яндекса» ещё проще — на боковой панели есть специальный значок для создания скриншотов, в том числе длинных. А в Firefox можно просто открыть сайт, кликнуть правой кнопкой и выбрать «Сделать скриншот» — браузер ещё предложит обрезать лишнее.
GoFullPage
Что это: браузерное расширение для Chrome и Edge.
Сайт: https://gofullpage.com/.
Стоимость: бесплатно (дополнительные функции за $1 в месяц).
Инструмент позволяет в один клик сделать скриншот целой страницы. Прогресс визуализируется с помощью чёрного пэкмена — мило.
Готовый снимок можно скачать в png, jpg или pdf. Если купить платную подписку, будет возможность сразу отредактировать изображение: обрезать, добавить текст или рамку, замылить.
Awesome Screenshot
Что это: браузерное расширение для Chrome, Edge, Mozilla.
Сайт: https://www.awesomescreenshot.com/.
Стоимость: бесплатно (с ограничениями) или подписка от $4 в месяц.
Мощный инструмент для создания скриншотов и скринкастов.
Чтобы захватить всю страницу, нужно кликнуть на иконку расширения и нажать на «Full Page». Или воспользоваться комбинацией горячих клавиш «Ctrl + Shift + E». Дальше Awesome Screenshot сам прокрутит и сфотографирует сайт — главное, не мешать.
Длинный скриншот можно отредактировать — например, добавить текст, стикеры или водяной знак, замылить, обрезать. Или сразу сохранить в png или pdf.
Есть интеграции с системами управления проектами и облачными хранилищами — можно отправить картинку туда без скачивания на диск.
FireShot
Что это: браузерное расширение для Chrome, Mozilla, Opera, Yandex, Edge.
Сайт: https://getfireshot.com/.
Стоимость: бесплатно или полная версия за $60 (пожизненная лицензия).
Универсальный плагин для всех популярных браузеров.
Использовать очень просто: установить, перейти на нужную веб-страницу, кликнуть по иконке на панели, вызвать меню и выбрать «Захватить всю страницу» (или нажать «Ctrl + Shift + S»).
После скроллинга и съёмки появится новая вкладка, где нужно будет выбрать: сохранить в png/jpg или pdf, отправить по почте, распечатать или просто скопировать в буфер обмена.
Покупка лицензии открывает доступ к дополнительным функциям: pdf с поддержкой текста, улучшенному захвату, графическому редактору и другим.
FastStone Capture
Что это: десктопная программа для Windows.
Сайт: https://www.faststone.org/FSCaptureDetail.htm.
Стоимость: $20 за пожизненную лицензию (30 дней — бесплатный пробный период).
Легкий и функциональный скриншотер с простыми функциями для редактирования снимков.
После установки на компьютер появится небольшое окошко поверх всех других. Чтобы сделать длинный скриншот, нужно открыть сайт и нажать на кнопку «Capture Full Screen» на панели FastStone. Затем выбрать область и кликнуть левой кнопкой мыши — программа медленно проскроллит и аккуратно сфотографирует нужную веб-страницу.
Потом откроется редактор: можно изменить размер, добавить надписи или что-то нарисовать.
FastStone сохраняет скриншоты в bmp, gif, jpg, png и pdf. А ещё программа умеет записывать экран вместе с курсором, звуком из динамиков и микрофоном, а также — преобразовывать снятое видео в gif.
ScreenshotMachine
Что это: веб-сервис для скриншотинга сайтов.
Сайт: https://www.screenshotmachine.com/.
Стоимость: бесплатно до 100 скриншотов в месяц (дальше от €9 в месяц).
Удобно — не нужно устанавливать никаких плагинов и программ. Достаточно вставить URL страницы, выбрать устройство, поставить галочку на «Full-page screenshot» и нажать «Capture».
Можно скачать результат в jpg или pdf. А если нужно постоянно мониторить сайты и делать много скриншотов, есть API.
А как сделать длинный скриншот на телефоне?
Некоторые устройства поддерживают такую функцию по умолчанию. На остальные нужно просто установить специальные приложения. Например, Longshot для Android и Tailor для Apple.
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни.
Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️
*Вместе с курсом вы будете получать рассылку блога Unisender
Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
6 способов сделать длинный скриншот (всей страницы)
Иван Иваничев
27 января, 2022
Chrome DevTools GoFullPage Awesome Screenshot FireShot FastStone Capture ScreenshotMachine
Мы в Telegram
В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.
Не всегда на серьёзных щах — шуточки тоже шутим =)
Подписаться
Станьте email-рокером 🤘
Пройдите бесплатный курс и запустите свою первую рассылку
Подробнее
С простыми скриншотами всё просто. Чтобы сделать снимок экрана, можно использовать стандартную кнопку Print Screen или специальную программу вроде Lightshot.
Но если нужно сфотографировать лендинг или веб-версию email-рассылки, — то есть сразу нескольких экранов, — обычный способ плохо подходит. Неудобно делать снимок → сохранять → скроллить → делать снимок … объединять в редакторе несколько скриншотов в одну картинку.
Чтобы быстро заскриншотить страницу целиком, есть несколько решений.
Chrome DevTools
Что это: внутренний инструмент браузера Chrome.
Стоимость: бесплатно.
В самом популярном браузере можно сделать скриншот всей страницы даже без установки дополнительных программ и расширений.
Для начала нужно открыть нужный сайт, затем «Инструменты разработчика»: через меню «Дополнительные инструменты» или комбинацию «Ctrl + Shift + I».
Дальше нужно кликнуть на три вертикальные точки, чтобы вызвать меню «Инструментов разработчика», и нажать на «Run Command». Или открыть соответствующее окно другой комбинацией — «Ctrl + Shift + P».
Если начать набирать «screen…», появляется подсказка «Capture full size screenshot». Остаётся выбрать эту команду и немного подождать. Браузер сделает скриншот целой страницы и скачает его в формате png.
Таким же способом можно заскриншотить мобильную версию сайта. Только перед выполнением команды нужно нажать на иконку в левом верхнем углу, которая называется «Toggle device toolbar», или воспользоваться горячими клавишами «Ctrl + Shift + M». Над страницей появится панель, где можно выбрать нужное устройство или самостоятельно указать размер экрана.
А как сделать длинный скриншот в других браузерах?
В Safari похожая система: нужно выбрать в меню «Разработка → Показать веб-инспектор», затем кликнуть правой кнопкой на первый тег «html» в коде страницы и нажать на «Сделать снимок экрана».
В браузере «Яндекса» ещё проще — на боковой панели есть специальный значок для создания скриншотов, в том числе длинных. А в Firefox можно просто открыть сайт, кликнуть правой кнопкой и выбрать «Сделать скриншот» — браузер ещё предложит обрезать лишнее.
GoFullPage
Что это: браузерное расширение для Chrome и Edge.
Сайт: https://gofullpage.com/.
Стоимость: бесплатно (дополнительные функции за $1 в месяц).
Инструмент позволяет в один клик сделать скриншот целой страницы. Прогресс визуализируется с помощью чёрного пэкмена — мило.
Готовый снимок можно скачать в png, jpg или pdf. Если купить платную подписку, будет возможность сразу отредактировать изображение: обрезать, добавить текст или рамку, замылить.
Awesome Screenshot
Что это: браузерное расширение для Chrome, Edge, Mozilla.
Сайт: https://www.awesomescreenshot.com/.
Стоимость: бесплатно (с ограничениями) или подписка от $4 в месяц.
Мощный инструмент для создания скриншотов и скринкастов.
Чтобы захватить всю страницу, нужно кликнуть на иконку расширения и нажать на «Full Page». Или воспользоваться комбинацией горячих клавиш «Ctrl + Shift + E». Дальше Awesome Screenshot сам прокрутит и сфотографирует сайт — главное, не мешать.
Длинный скриншот можно отредактировать — например, добавить текст, стикеры или водяной знак, замылить, обрезать. Или сразу сохранить в png или pdf.
Есть интеграции с системами управления проектами и облачными хранилищами — можно отправить картинку туда без скачивания на диск.
FireShot
Что это: браузерное расширение для Chrome, Mozilla, Opera, Yandex, Edge.
Сайт: https://getfireshot.com/.
Стоимость: бесплатно или полная версия за $60 (пожизненная лицензия).
Универсальный плагин для всех популярных браузеров.
Использовать очень просто: установить, перейти на нужную веб-страницу, кликнуть по иконке на панели, вызвать меню и выбрать «Захватить всю страницу» (или нажать «Ctrl + Shift + S»).
После скроллинга и съёмки появится новая вкладка, где нужно будет выбрать: сохранить в png/jpg или pdf, отправить по почте, распечатать или просто скопировать в буфер обмена.
Покупка лицензии открывает доступ к дополнительным функциям: pdf с поддержкой текста, улучшенному захвату, графическому редактору и другим.
FastStone Capture
Что это: десктопная программа для Windows.
Сайт: https://www.faststone.org/FSCaptureDetail.htm.
Стоимость: $20 за пожизненную лицензию (30 дней — бесплатный пробный период).
Легкий и функциональный скриншотер с простыми функциями для редактирования снимков.
После установки на компьютер появится небольшое окошко поверх всех других. Чтобы сделать длинный скриншот, нужно открыть сайт и нажать на кнопку «Capture Full Screen» на панели FastStone. Затем выбрать область и кликнуть левой кнопкой мыши — программа медленно проскроллит и аккуратно сфотографирует нужную веб-страницу.
Потом откроется редактор: можно изменить размер, добавить надписи или что-то нарисовать.
FastStone сохраняет скриншоты в bmp, gif, jpg, png и pdf. А ещё программа умеет записывать экран вместе с курсором, звуком из динамиков и микрофоном, а также — преобразовывать снятое видео в gif.
ScreenshotMachine
Что это: веб-сервис для скриншотинга сайтов.
Сайт: https://www.screenshotmachine.com/.
Стоимость: бесплатно до 100 скриншотов в месяц (дальше от €9 в месяц).
Удобно — не нужно устанавливать никаких плагинов и программ. Достаточно вставить URL страницы, выбрать устройство, поставить галочку на «Full-page screenshot» и нажать «Capture».
Можно скачать результат в jpg или pdf. А если нужно постоянно мониторить сайты и делать много скриншотов, есть API.
А как сделать длинный скриншот на телефоне?
Некоторые устройства поддерживают такую функцию по умолчанию. На остальные нужно просто установить специальные приложения. Например, Longshot для Android и Tailor для Apple.
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни.
Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала. Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️
*Вместе с курсом вы будете получать рассылку блога Unisender
Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
Как сделать скриншот всей страницы в Chrome
Хотите сделать скриншот всей страницы в Chrome? Клавиша Print Screen не поможет вам с этой задачей, поэтому вам нужно будет использовать другие инструменты.
Здесь мы обсудим расширение Movavi ScreenShot и инструменты разработчика в Chrome.
Параметры | Movavi ScreenShot | Инструменты разработчика |
|---|
1 9 выбор размера изображения0024
| Fast screenshotting | ||
| Easy for any ability level | ||
| Intuitive settings | ||
| Установка не требуется |
Посмотреть все функции Скрыть таблицу | Сделать снимок экрана Сделать снимок экрана |
Простой способ сделать скриншот всей страницы Chrome
Начнем с MovaviShot.
Movavi ScreenShot Преимущества расширения:
- Делает скриншот в Google Chrome на Windows 10 или Mac.
- Делает снимки экрана в разных размерах: полный снимок экрана в Chrome, определенные части экрана или полный экран, включая все открытые вкладки.
- Не требует специальных разрешений для установки.
- Можно использовать в режиме инкогнито.
- Поддерживает бесплатную загрузку скриншотов Chrome.
Недостатки расширения:
- Нет инструментов редактирования
- Нет ссылки для обмена скриншотами через социальные сети
Вот краткое руководство о том, как распечатать Chrome с помощью Movavi ScreenShot.
Шаг 1. Установите расширение
Откройте Интернет-магазин Google и найдите Movavi ScreenShot.
Добавьте расширение Movavi ScreenShot, нажав кнопку Добавить в Chrome . Значок появится в вашем браузере автоматически.
Шаг 2. Выберите формат
Чтобы сделать скриншот всей страницы Chrome, выберите Захват всей страницы 9Значок 0102 — это первый вариант в списке размеров.
Откройте веб-страницу, которую хотите захватить, и нажмите значок, чтобы запустить процесс захвата снимка экрана.
Шаг 3. Сделайте снимок экрана
Подождите несколько секунд. Movavi ScreenShot автоматически прокрутит страницу и сделает снимок. Вам не нужно шевелить пальцем.
Когда захват будет завершен, вы увидите результат в новой вкладке. Если вас устраивает изображение, нажмите Сохранить JPG .
Как использовать инструменты разработчика, чтобы сделать снимок экрана всей страницы
Вы, наверное, слышали о создании снимков экрана с помощью инструментов разработчика. Хотя это звучит сложно, это не только для разработчиков. Ниже вы найдете простое руководство.
Но сначала проверьте преимущества и недостатки этого метода.
Преимущества инструментов разработчика:
- Не требует установки.
- Позволяет настроить размер снимка экрана.
- Имеет специальную опцию скриншотов для разработчиков.
Недостатки инструментов разработчика:
- Требуется время, чтобы найти правильную настройку.
- Многоэтапный процесс.
- Может показаться сложным для неопытных пользователей.
- Нет инструментов редактирования.
- Нет возможности поделиться.
Шаг 1. Откройте вкладку Инструменты разработчика
Нажмите на три точки в правом верхнем углу браузера и перейдите к Дополнительные параметры . Выбираем последний пункт — Инструменты разработчика .
Вы также можете использовать сочетания клавиш: Alt + Command + I на Mac или Ctrl + Shift + I на Windows.
Шаг 2. Перейдите на панель инструментов устройства
Откройте панель инструментов устройства . Найдите значок с двумя устройствами и нажмите на него.
Шаг 3. Выберите размер
Теперь вам нужно определить ширину и высоту скриншота. Вы можете задать любые параметры изображения или просто выбрать один из стандартных вариантов в Адаптивное меню .
Шаг 4. Сделайте снимок экрана
Нажмите на три точки рядом с настройками размера. Выберите Сделать полноразмерный снимок экрана , чтобы сделать снимок всей страницы.
Выберите папку и сохраните изображение на свой компьютер.
Еще один способ сделать снимок экрана всей страницы с помощью инструментов разработчика
Вы все еще спрашиваете себя, как сделать скриншот всей страницы в Chrome? Проверьте этот альтернативный способ использования инструментов разработчика. Возможно, вам будет проще и понятнее.
Шаг 1. Откройте Инструменты разработчика
Начните с открытия Инструменты разработчика .
Когда на экране появится код HTML, активируйте поле поиска. Нажмите сочетание клавиш Ctrl + Shift + P для Windows или Command + Shift + P для Mac.
Теперь вы видите область поиска.
Шаг 2. Выберите вариант создания скриншота
Введите «скриншот» в поле поиска.
Вы увидите четыре варианта скриншота — Снимок экрана области , Снимок экрана в полном размере , Снимок экрана узла и Снимок экрана .
Нажмите Сделайте полноразмерный скриншот . Обратите внимание, что вы должны выбрать опцию, щелкнув по ней мышью, а не нажимая Enter . Если вы нажмете Введите , браузер закроет область поиска.
Шаг 3. Сделайте снимок экрана
Нажмите выбранную опцию и дайте Chrome сделать снимок экрана. Сохраните его на свой компьютер.
Заключение
Не можете решить, какой инструмент использовать? Взгляните на эти факторы.
Функции : С помощью инструментов для создания скриншотов вы можете рассмотреть такие функции, как захват выбранной части экрана, установка размера скриншота, параметры редактирования.
Простота использования : Сделать снимок экрана не составит труда. Выберите инструмент, который позволит вам захватить веб-страницу всего за пару кликов.
Отзывы : ознакомьтесь с отзывами пользователей, прежде чем выбрать инструмент. Так вы узнаете о преимуществах и недостатках программ.
Часто задаваемые вопросы
Как сделать снимок экрана на всю страницу?
Чтобы сделать снимок экрана на всю страницу, выполните следующие действия.
Шаг 1. Установите Movavi ScreenShot. Расширение можно установить бесплатно.
Шаг 2. Щелкните значок снимка экрана и выберите Захват всей страницы .
Шаг 3. Подождите несколько секунд, пока расширение закончит прокручивать страницу.
Шаг 4. Сохраните изображение на рабочий стол. Позже вы можете отредактировать его и поделиться им с друзьями и коллегами.
Скриншот Movavi в Интернет-магазине Google
Как сделать скриншот с прокруткой?
Скриншот с прокруткой аналогичен скриншоту на всю страницу. Чтобы захватить всю страницу, вам нужно установить Movavi ScreenShot.
Шаг 1. Найдите расширение в интернет-магазине Google.
Шаг 2. Добавьте его в браузер Chrome и закрепите значок в правом верхнем углу.
Шаг 3. Нажмите на иконку Movavi ScreenShot и выберите вариант создания полностраничного снимка экрана.
Шаг 4. Сохраните файл на свой компьютер.
Как я могу сделать снимок экрана на всю страницу на моем iPhone?
Можно ли сделать снимок экрана на всю страницу на iPhone? Да, но только если у вас iOS 13 или выше. Если версия вашей операционной системы ниже, вам нужно будет использовать специальное приложение.
Вот краткое руководство по созданию полностраничного снимка экрана на iPhone под управлением iOS 13.
Шаг 1. Нажмите кнопку увеличения громкости и боковые кнопки и сделайте снимок экрана, как обычно.
Шаг 2. Откройте изображение в режиме предварительного просмотра, нажав на изображение в левом нижнем углу экрана.
Шаг 3. В окне предварительного просмотра вы увидите две опции — Экран или Полная страница .
Нажмите кнопку Полная страница .
Шаг 4. Сохраните файл в формате PDF. Вы не можете сохранить его в формате изображения из-за длины. Если вам нужно изображение в формате PNG или JPG, вам нужно будет преобразовать его с помощью дополнительного приложения.
Имейте в виду, что встроенный в iPhone инструмент для создания снимков экрана предназначен для Safari. Он может не работать с Google Chrome или другими браузерами.
Захват полноразмерных скриншотов веб-страницы с прокруткой в Chrome
Браузер Google Chrome предлагает два способа захвата полноразмерных скриншотов веб-страницы. Это может быть необходимо или полезно для многих веб-работников, будь то разработчики, дизайнеры, редакторы, менеджеры, писатели, аналитики или любой другой веб-проект.
Подходы, которые мы рассмотрим для захвата полноразмерных снимков экрана веб-страницы с помощью Chrome, требуют полной версии Chrome для любого настольного устройства, включая Mac, Windows, Linux и Chromebook.
Плагины не требуются, так как мы будем использовать встроенные инструменты разработчика с Chrome.
Обратите внимание, что здесь мы рассматриваем браузер Chrome для настольных компьютеров. Вы также можете делать полноэкранные скриншоты страниц с помощью Firefox, Safari на Mac и Safari для iPhone и iPad, если вам это необходимо или вы предпочитаете.
Готовы сделать полноразмерный скриншот веб-страницы в Chrome? Вот что нужно сделать:
- Откройте Инструменты разработчика Chrome (Просмотр > Разработчик > Инструменты разработчика)
- Нажмите кнопку «Режим адаптивного дизайна» в панели инструментов разработчика
- Прокрутите всю веб-страницу вниз, чтобы загрузить все изображения (это важно для захвата изображений с отложенной загрузкой — распространенного метода, используемого для ускорения веб-страниц)*
- Нажмите на три вертикальные точки в правом верхнем углу инструмента адаптивного дизайна и выберите «Сделать полноразмерный снимок экрана»
- Скриншот в полном размере появится в папке загрузок Chrome по умолчанию
На Mac вы найдете полноразмерный снимок экрана веб-страницы, доступный в разделе «Загрузки пользователей», если вы не изменили его вручную.
Размеры захваченного снимка экрана будут различаться в зависимости от того, какое устройство вы выбрали в адаптивном режиме, например, если вы выбрали iPad Air и сделали полноразмерный снимок экрана с прокруткой домашней страницы osxdaily.com, ваш снимок экрана может быть около 2084 × 16439 пикселей. Очевидно, чем длиннее стиль страницы или
* . Если вы не прокручиваете всю веб-страницу, любые лениво загруженные изображения не будут захвачены снимком экрана, что сделает снимок экрана полной страницы неполным и не репрезентативным для того, что пользователь видит на страница.
Захват полноразмерных снимков экрана в Chrome через консоль
Еще один способ сделать полноразмерные снимки экрана в Chrome — использовать команду «Выполнить» в консоли разработчика и ввести «снимок экрана», затем выбрать «Захват полноразмерного снимка экрана» из которые появляются. Обязательно прокрутите всю веб-страницу, прежде чем * сделать это.
Это может быть лучшим вариантом для некоторых пользователей, но немного сложнее для тех, кто менее знаком с командными строками.
Ваш комментарий будет первым