Обычный скриншот и скриншот всей страницы
Обычный скриншот — это ровно то, что сейчас на мониторе: видимая часть страницы, панель браузера, может быть, кусок панели задач. Скриншот всей страницы снимает весь документ от верха до футера, вместе со всем, до чего обычно нужно прокручивать, одним высоким изображением.
Полная версия нужна, когда контекст важен не меньше деталей:
- Аудит лендингов и PPC — отправить клиенту комментарии к каждому блоку, а не только к первому экрану.
- Анализ конкурентов — сохранить страницу конкурента такой, какой она была в конкретную дату.
- Просмотр дизайна и контента — читать длинную страницу сверху донизу одним изображением, а не десятью отдельными кусками.
- Документирование и доказательства — зафиксировать условия, цены или рекламный лендинг, пока их не поменяли.
Склеивать десять обычных скриншотов вручную можно, но это медленно, и швы никогда не совпадают идеально. Каждый способ ниже прокручивает и склеивает за вас.
Способ 1: встроенная команда Chrome «Capture full size screenshot» (без расширения)
В Chrome есть функция скриншота всей страницы, спрятанная в инструментах разработчика. Чтобы ей пользоваться, ничего знать о разработке не нужно:
- Откройте нужную страницу и дождитесь полной загрузки. Один раз прокрутите вниз, чтобы подгрузились ленивые картинки, и вернитесь наверх.
- Откройте DevTools: Ctrl+Shift+I на Windows, Cmd+Option+I на Mac (или F12).
- Откройте меню команд: Ctrl+Shift+P на Windows, Cmd+Shift+P на Mac.
- Введите screenshot и выберите Capture full size screenshot (если DevTools на русском — команда будет называться иначе, ищите по слову «скриншот»).
- Chrome сохранит PNG всей страницы в папку «Загрузки».
В том же меню есть Capture node screenshot (сначала выберите элемент на панели Elements, чтобы снять только этот блок) и Capture area screenshot. Чтобы получить мобильную версию страницы, нажмите иконку устройства в DevTools (Ctrl+Shift+M / Cmd+Shift+M), выберите размер телефона и запустите «Capture full size screenshot» — получите всю мобильную вёрстку одним изображением. Удобно, чтобы проверить, как лендинг выглядит на телефоне.
Где слабое место: каждый раз пять шагов, редактора нет (стрелки или размытие придётся добавлять в другой программе), и файл всё равно нужно куда-то загрузить, чтобы поделиться. К тому же снимается только основная прокрутка страницы — веб-приложения, где контент прокручивается внутри панели (Gmail, Notion, дашборды, многие админки), выходят одним экраном, а остальное обрезается.
Способ 2: расширение для Chrome (в один клик)
Расширение делает ту же прокрутку и склейку с кнопки на панели и обычно открывает результат в редакторе. С расширением DashShot это выглядит так:
- Нажмите иконку DashShot на панели Chrome.
- Выберите Уся сторінка (вся страница). Расширение прокрутит страницу и склеит все части в одно изображение.
- Снимок откроется в редакторе в новой вкладке — добавьте стрелки, нумерованные выноски, текст или пикселизируйте персональные данные.
- Скопируйте ссылку и отправьте. Получатель откроет её в любом браузере без регистрации.
На реальных страницах важны две детали. Во-первых, если страница прокручивается внутри контейнера, а не всего окна, расширение находит эту панель и снимает её, а не возвращает один экран, — именно там, где способ через DevTools не работает. Во-вторых, оно работает на любой странице, которую вы можете открыть в Chrome, в том числе за логином, потому что снимок делается в вашей собственной сессии браузера. Есть и снимок с задержкой — для страниц, где в момент захвата должно быть открыто меню или состояние при наведении.
Снимок всей страницы и само расширение бесплатны. Другие популярные расширения — самое известное GoFullPage — тоже хорошо прокручивают и склеивают; разница в основном в том, что происходит после снимка: редактор, ссылка, история.
Способ 3: «Снимок веб-страницы» в Microsoft Edge
Если у вас есть Edge (он поставляется с Windows), нажмите Ctrl+Shift+S на любой странице, выберите Захватить всю страницу — Edge откроет результат в простом режиме разметки, где можно рисовать, копировать и сохранять. Быстро и надёжно на обычных страницах, а с веб-приложениями с внутренней прокруткой — те же ограничения.
Способ 4: встроенный скриншотер Firefox
В Firefox снимок всей страницы встроен уже много лет. Кликните правой кнопкой где угодно на странице, выберите Сделать скриншот (или Ctrl+Shift+S / Cmd+Shift+S) и нажмите Сохранить всю страницу. Изображение можно скопировать или скачать. Если скриншот всей страницы нужен изредка, открыть страницу в Firefox часто быстрее, чем любые обходные пути в Chrome.
| Способ | Шагов | Редактор | Ссылка | Страницы с внутренней прокруткой |
|---|---|---|---|---|
| Chrome DevTools | 5 | Нет | Нет, только файл | Нет |
| Расширение DashShot | 2 | Да | Да, сразу | Да |
| Edge | 2 | Простая разметка | Нет | Нет |
| Firefox | 2 | Нет | Нет | Нет |
А встроенные инструменты Windows и Mac?
Ни «Ножницы» Windows (Win+Shift+S), ни Cmd+Shift+4 / Cmd+Shift+5 на macOS не умеют снимать страницу с прокруткой — они видят только то, что сейчас на экране. Когда вас просят «просто сделать скрин всей страницы», имеют в виду один из способов в браузере выше. Отдельный лайфхак для Mac: Safari умеет экспортировать страницу в PDF через Файл → Экспортировать как PDF — удобно для архива текстовых страниц, но аннотировать такой файл неудобно.
Когда скриншот всей страницы получается кривым — и как это исправить
Липкая шапка повторяется по всей странице. Шапки и чат-виджеты с фиксированным положением остаются на экране при прокрутке, и некоторые инструменты вклеивают их в каждый фрагмент. Что делать: перед снимком прокрутите в самый верх, закройте чат-виджеты и баннеры cookie, а если шапка всё равно повторяется — воспользуйтесь способом через DevTools: он рендерит страницу как одно высокое окно и обычно этой проблемы не имеет.
Картинки пустые или серые. Многие сайты загружают изображения, только когда вы до них докручиваете. Что делать: перед снимком один раз медленно прокрутите страницу вниз, потом вернитесь наверх.
Снимается только один экран. Скорее всего, страница прокручивается внутри контейнера (типично для веб-приложений и дашбордов), а не всего окна. Что делать: берите расширение, которое распознаёт контейнеры с прокруткой, или снимайте панель частями.
Бесконечная лента никогда не заканчивается. Ленты, которые подгружают контент при прокрутке, не имеют настоящего низа. Что делать: прокрутите до нужного места и сделайте скриншот области или снимайте частями.
Изображение огромное или обрезается. Очень длинные страницы дают изображения высотой в десятки тысяч пикселей, которые некоторые программы отказываются открывать, а браузеры могут ограничивать. Что делать: снимайте только нужную часть или разбейте очень длинную страницу на два-три снимка.
Анимации и поп-апы попадают в середину изображения. Что делать: дождитесь конца анимаций, закройте поп-апы и снимите ещё раз.
Советы для скриншотов всей страницы, которые вы кому-то отправляете
- Отметьте главное. Изображение на 9 000 пикселей без пометок заставляет читателя искать. Две-три нумерованные выноски подскажут, куда смотреть и в каком порядке.
- Размойте персональные данные. На страницах за логином часто видны имена, email или детали заказов. Пикселизируйте их перед отправкой.
- Отправляйте ссылку, а не вложение на 15 МБ. PNG всей страницы тяжёлые; ссылка открывается мгновенно и работает на телефоне.
- Фиксируйте дату. Для аудита конкурентов или рекламы дата снимка важна не меньше содержания — страницы меняются каждую неделю.