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

Быстрая навигация

• Как сделать прокручиваемый скриншот в Safari
• Встроенные варианты в Firefox и Edge
• Веб‑сервисы и расширения (GoFullPage, Movavi, Full Page Screen Capture)
• Альтернативные подходы и когда они не подойдут
• Чеклист для разработчика, дизайнера и тестировщика
• Дерево решений и критерии приёмки
• Часто задаваемые вопросы (FAQ)

Почему может понадобиться прокручиваемый скриншот

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

Важно: все инструменты, описанные в этой статье, работают с веб‑страницами и файлами, которые можно открыть в браузере. Некоторые страницы с динамической подгрузкой контента (infinite scroll) или защищённые скриптами могут требовать дополнительных шагов.

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

Safari на macOS позволяет сохранить полную веб‑страницу через Web Inspector без установки сторонних расширений. Это стандартный, приватный и безопасный метод. Вот подробная инструкция:

1. Откройте в Safari веб‑страницу, которую нужно захватить.
2. Прокрутите страницу до самого низа — это помогает загрузить ленивую подгрузку контента (если сайт использует lazy loading).

3. В меню Safari выберите «Настройки …».

4. В разделе “Дополнительно” отметьте опцию «Показывать меню “Разработка” в строке меню». Закройте окно настроек.

5. В строке меню выберите «Разработка» → «Подключить Web Inspector» или «Показать Web Inspector».

6. В открывшемся окне Web Inspector перейдите на вкладку “Elements” (Элементы). Вы увидите дерево DOM и ресурсы страницы.

7. Выберите самый верхний элемент HTML (обычно это или первый элемент в дереве). Это важно — именно над корневым элементом доступна команда сохранения экрана всей страницы.

8. Кликните правой кнопкой по выбранному элементу и выберите «Capture Screenshot» (Сохранить снимок). Safari создаст изображение полной страницы и предложит сохранить файл.

9. Укажите имя файла и папку для сохранения, затем нажмите «Сохранить».

Готово — вы получили изображение всей страницы. Если часть контента не видна, убедитесь, что страница полностью загрузилась и не блокирует Web Inspector скриптами безопасности.

Советы по использованию метода Safari

• Если сайт использует ленивую подгрузку (infinite scroll), вручную прокрутите весь контент или воспользуйтесь скриптом для последовательной подгрузки перед созданием скриншота.
• Если часть контента появляется по клику (аккордеоны, модальные окна), раскройте их заранее.
• Формат и качество изображения определяются самим Safari; при необходимости конвертируйте PNG в нужный формат.

Встроенные возможности других браузеров

Некоторые браузеры содержат собственные средства для захвата полной страницы:

Firefox

Firefox имеет встроенную функцию съёмки страницы, доступную из контекстного меню и из инструментов разработчика.

Пошагово:

1. Откройте страницу в Firefox.
2. Кликните правой кнопкой по пустому месту страницы и выберите «Сделать снимок экрана».

3. Нажмите «Сохранить всю страницу» (Save full page).

4. После предосмотра нажмите «Загрузить», чтобы сохранить файл.

Результат сохранится в папке загрузок Firefox или в папке, которую вы указали.

Microsoft Edge

Edge на macOS тоже умеет делать снимки всех страниц через Web Capture.

Пошагово:

1. Откройте страницу.
2. Кликните правой кнопкой и выберите «Web Capture» или нажмите Shift + Command + S.

3. В появившемся окне выберите «Capture Full Page».

4. В окне предпросмотра нажмите иконку дискеты, чтобы сохранить изображение.

Файл появится в папке загрузок Edge или в той папке, что вы указали.

Веб‑сервисы и отдельные приложения

Если вы предпочитаете не менять браузер или хотите делать скриншоты по URL без открытия страницы — подойдут веб‑сервисы и отдельные расширения.

Full Page Screen Capture (веб‑сервис)

Full Page Screen Capture — веб‑приложение, куда можно вставить ссылку на страницу, и сервис генерирует изображение целиком.

Плюсы: работает в любом браузере, не требует установки. Минусы: отправляет URL стороннему сервису — не подходит для приватных страниц.

Пошагово:

1. Перейдите на сайт Full Page Screen Capture.
2. Вставьте URL страницы и нажмите «Capture Now».

3. Подождите обработки. Затем нажмите «Click to Download» в области предпросмотра.

4. В новой вкладке правой кнопкой сохраните изображение как «Сохранить изображение как …».

5. Укажите имя и папку, затем сохраните.

GoFullPage и Movavi (расширения)

GoFullPage и Movavi — популярные расширения для Chrome, которые захватывают всю страницу и сохраняют её в PNG/PDF/JPG.

Преимущества расширений: быстро, удобно, работают с локальными и защищёнными страницами (если разрешить доступ). Недостатки: нужно установить расширение, которое получит разрешения на доступ к страницам.

Пошагово для GoFullPage (Chrome):

1. Установите расширение GoFullPage из Интернет-магазина Chrome.

2. Подтвердите установку и закрепите иконку.

3. Откройте страницу и нажмите иконку GoFullPage. Расширение создаст вкладку с результатом, где можно скачать PDF или PNG.

Movavi (Chrome) устанавливается аналогично:

1. Добавьте расширение Movavi Screenshot в Chrome и закрепите его.

2. Откройте страницу, нажмите иконку Movavi и выберите “Capture entire page”.

3. Разрешите управление загрузками, если это потребуется, затем сохраните изображение.

Альтернативные подходы и когда они подходят

1. Снятие последовательных скриншотов и их склейка в редакторе (например, в Photoshop) — подходит для проектов с точными требованиями к выравниванию, но занимает время.
2. Использование инструментов автоматизации, которые прокручивают страницу и делают снимки фрагментами (selenium, puppeteer) — подходит для регулярной генерации отчётов и тестирования.
3. Сохранение страницы как PDF через печать в браузере — просто, но часто теряются веб‑шрифты и часть визуальных эффектов.

Когда эти методы не подойдут:

• Страницы с бесконечной подгрузкой, где контент появляется только при реальном взаимодействии пользователя — потребуются скрипты или ручная прокрутка.
• Приватные страницы за аутентификацией: веб‑сервисы не смогут получить контент без авторизации.

Практические советы и эвристики

• Перед съёмкой включите режим разработчика (если используете Safari) и дождитесь полной загрузки страницы.
• Если увидите белые полосы или обрезанные блоки — попробуйте увеличить окно инспектора или использовать расширение, которое генерирует PDF.
• Для публикаций в блогах чаще выбирают PNG для максимального качества и PDF для архивов и печати.
• Если сайт рассчитывает на скрипты для отображения контента, используйте браузер с включённым JavaScript и дождитесь отрисовки.

Чеклист перед созданием скриншота

• Страница полностью загружена.
• Все динамические блоки раскрыты (аккордеоны, всплывающие окна) если нужно их включить.
• Прокручена до низа при ленивой подгрузке.
• Очистите временно уведомления и всплывающие окна, мешающие виду.
• Проверьте разрешения расширения (если используете расширение).

Роли и обязанности: быстрые чеклисты

Для организованной работы добавляю чеклисты по ролям.

Разработчик:

• Проверить, что страница полностью отрисовывается без ошибок JS.
• Предоставить тестовую версию без авторизации для скриншотов.
• При необходимости подготовить скрипт прокрутки для автоматического снятия.

Дизайнер:

• Выбрать формат файла (PNG для экранного качества, PDF для печати).
• Проверить, что в скриншоте видны все важные элементы дизайна.
• Указать область интереса, если нужно кадрировать результат.

Тестировщик / Контент‑редактор:

• Пройти по чеклисту перед съёмкой.
• Проверить итоговое изображение на наличие ошибок и визуальных артефактов.
• Добавить скриншот в баг‑репорт или документацию с указанием версии страницы.

Дерево решений (когда выбирать какой метод)

flowchart TD
  A[Нужен полный снимок страницы?] --> B{Страница общедоступна?}
  B -- Да --> C{Какой браузер используете?}
  C -- Safari --> D[Использовать Web Inspector в Safari]
  C -- Firefox --> E[Использовать встроенный снимок Firefox]
  C -- Chrome/Edge --> F[Использовать встроенный Edge или расширение GoFullPage]
  B -- Нет --> G{Можно ли авторизоваться автоматом?}
  G -- Да --> H[Использовать расширение в профильном браузере или Puppeteer]
  G -- Нет --> I[Сделать локальную копию страницы/скрипт или использовать приватный инструмент]
  D --> Z[Проверить результат, откорректировать]
  E --> Z
  F --> Z
  H --> Z
  I --> Z

Форматы файлов и рекомендации

• PNG — лучше для скриншотов интерфейсов (без потерь). Подходит, если нужен чёткий пиксельный результат.
• JPG/JPEG — экономнее по размеру, может давать артефакты на мелких элементах; подходит для фото и превью.
• PDF — удобен для печати и архивов; иногда теряются веб‑шрифты или интерактивность.

Выбор формата зависит от цели: для баг‑репортов и документации чаще используют PNG; для отправки по почте или печати — PDF.

Критерии приёмки

• В изображении видны все элементы страницы от верхнего до нижнего края.
• Нет обрезанных блоков и белых полос (за исключением элементарных особенностей макета).
• Текст читаемый, изображения не размыты (при проверке на целевом разрешении).
• Если требовалось, в скриншоте присутствуют раскрытые динамические элементы.

Примеры отказа и способы обхода

Когда встроенные инструменты не сработают:

• Страница требует сложной авторизации — используйте расширение внутри профиля, где вы уже авторизованы, или автоматизацию (Puppeteer) с передачей cookies.
• Контент загружается по мере прокрутки и никогда не достигает «низа» — автоматизируйте прокрутку и снимки по фрагментам, затем объединяйте.
• Защищённый контент, который блокирует Web Inspector — используйте расширения, которые работают внутри браузера, или снимайте экран фрагментами.

Безопасность и приватность

• Веб‑сервисы принимают URL, поэтому не отправляйте туда приватные или платные страницы.
• Расширения требуют доступ к страницам — проверьте политику конфиденциальности и права расширения.

Таблица совместимости методов (обзор)

Краткая методология для автоматизации (mini‑method)

Если вам нужно регулярно делать скриншоты:

1. Определите целевые URL и шаблон содержимого.
2. Используйте Puppeteer/Playwright для автоматической загрузки страницы, ожидания полной отрисовки и выполнения скрипта прокрутки.
3. Снимайте полную страницу через API браузера (.screenshot({fullPage: true})).
4. Сохраняйте файлы в согласованную папку, добавляйте метаданные (URL, дата/время).

Это надёжный подход для отчётов и тестов, но требует настроек и окружения CI.

Часто задаваемые вопросы

Можно ли использовать инструмент инспектора на браузере, отличном от Safari?

Да. Firefox предоставляет похожую возможность: в инструментах разработчика можно выбрать элемент и сохранить его как “Screenshot Node” или сделать автоматический снимок всей страницы через контекстное меню. Google Chrome напрямую такой команды не предоставляет в стандартной сборке, но можно использовать расширения или DevTools команды с помощью скриптов.

Работают ли GoFullPage и Movavi с другими браузерами?

GoFullPage официально поддерживает Google Chrome и Microsoft Edge. Movavi Screenshot работает в Google Chrome и Firefox. Уточняйте совместимость в описании расширения перед установкой.

Как удалить расширение в Google Chrome?

Нажмите на иконку “Puzzle” (пазл) в правом верхнем углу Chrome. Найдите нужное расширение, нажмите три точки справа от него и выберите «Удалить из Chrome».

Короткая сводка и рекомендации

• Если вы используете Safari — используйте Web Inspector для приватных страниц.
• Если вы часто делаете скриншоты — настройте расширение (GoFullPage/Movavi) или автоматизацию (Puppeteer).
• Для приватных страниц не применяйте веб‑сервисы, передающие URL третьим сторонам.

Важное: перед массовой автоматизированной съёмкой убедитесь, что вы не нарушаете правила использования сайта и не создаёте лишнюю нагрузку на сервер.

Image credit: Unsplash. Все скриншоты — Natalie dela Vega.