Как сделать полный скрин сайта: 3 способа в 2026

Полный скрин сайта сохраняет всю прокручиваемую страницу одним изображением, а не только видимую область окна. Быстрее всего сделать его встроенным инструментом Firefox или Chrome; Playwright подходит для повторяемых снимков нескольких страниц. Ниже есть проверка, которая помогает не потерять ленивые изображения, нижний блок и всплывающие элементы.

Какой способ выбрать

Для разового снимка без установки расширений используйте Firefox. Если сайт уже открыт в Chrome, подойдёт команда DevTools. Для регулярной проверки макетов, портфолио или нескольких адресов используйте Playwright. Выбор определяется повторяемостью задачи, а не качеством картинки: все три способа умеют захватить страницу ниже границы экрана.

• Firefox: самый короткий путь через контекстное меню и кнопку Save full page.
• Chrome DevTools: удобно, когда вы уже проверяете сайт в инструментах разработчика.
• Playwright: сохраняет снимки по сценарию и подходит для одинаковой проверки после изменений.

Полный скрин доказывает внешний вид только в выбранном размере окна и в момент съёмки. Он не заменяет проверку ссылок, формы, мобильной версии и загрузки страницы.

Подготовьте страницу, чтобы скрин был полным

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

1. Обновите страницу и дождитесь исчезновения индикаторов загрузки.
2. Закройте чат, уведомления и меню, если они не должны попасть в результат.
3. Прокрутите страницу до нижнего блока, проверяя, что изображения появились.
4. Вернитесь наверх и не меняйте размер окна до сохранения снимка.
5. Запомните последний видимый элемент внизу. По нему вы проверите готовый файл.

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

Способ 1: полный скрин в Firefox

Mozilla поддерживает захват полной страницы во встроенном Firefox Screenshots. В официальной инструкции Firefox указаны два входа: щелчок правой кнопкой по пустому месту страницы и команда Take Screenshot либо сочетание Ctrl+Shift+S на Windows и Linux, Command+Shift+S на macOS.

1. Щёлкните правой кнопкой по свободной области страницы и выберите Take Screenshot.
2. В правом верхнем углу выберите Save full page, а не Save visible.
3. Просмотрите предпросмотр: верх, середину и самый низ страницы.
4. Нажмите Download, чтобы сохранить изображение в папку загрузок браузера.

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

По теме: Как сделать разрешение сайта: адаптивный экран в 2026

Способ 2: полный скрин в Chrome DevTools

Chrome умеет сохранять всю страницу через меню команд DevTools. Google документирует открытие DevTools через F12 или Ctrl+Shift+I на Windows и Linux, Command+Option+I на macOS, а меню команд через Ctrl+Shift+P либо Command+Shift+P. Эти сочетания собраны в официальной справке Chrome DevTools.

1. Откройте DevTools и оставьте панель прикреплённой к окну браузера.
2. Откройте меню команд сочетанием для вашей системы.
3. Введите screenshot и выберите Capture full size screenshot.
4. Дождитесь загрузки PNG и откройте файл из папки загрузок.
5. Сверьте верх, нижний блок и один элемент из середины страницы.

Меню команд Chrome предназначено для быстрых действий DevTools; Google отдельно описывает поиск команд по слову screenshot в руководстве по Command Menu. Если видите только снимок области, выберите именно full size, а не area или node screenshot.

Для отдельной мобильной проверки включите Device Mode, выберите ширину устройства, обновите страницу и снова выполните команду. Один десктопный скрин не доказывает, что мобильная версия сайта выглядит правильно.

Способ 3: повторяемый скрин через Playwright

Playwright нужен, когда снимок входит в проверку сайта после каждого изменения. Его официальный метод page.screenshot() принимает параметр fullPage: true, который захватывает всю прокручиваемую страницу. Это прямо показано в документации Playwright.

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('https://example.com');
await page.screenshot({ path: 'page-full.png', fullPage: true });
await browser.close();

Замените демонстрационный адрес в примере адресом страницы, которую имеете право проверять. Фиксированный viewport делает сравнение повторяемым. Перед снимком дождитесь конкретного элемента, например через await page.locator('h1').waitFor(). Измените селектор под свою страницу: одно только состояние сети не доказывает готовность контента. Для такого сайта добавьте управляемую прокрутку или подготовьте страницу вручную.

По теме: Как сделать на сайте список: HTML, CSS и доступность

Как проверить готовый файл

Проверка занимает меньше минуты и ловит большую часть бесполезных снимков. Откройте PNG не в миниатюре, а в просмотрщике с масштабом 100 процентов, затем пройдите сверху вниз.

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

Практическое правило для приёмки сайта: сохраняйте не один огромный файл, а комплект из полного десктопного снимка, полного мобильного снимка и двух увеличенных фрагментов с формой и главным действием. Так общий порядок блоков остаётся виден, а важные детали можно прочитать без сильного увеличения.

Почему полный скрин получается неправильным

Если результат пустой, обрезанный или с повторами, ищите причину по симптому.

• Нет картинок ниже первого экрана: прокрутите страницу до конца перед снимком, затем повторите.
• Повторяется шапка: на сайте используется фиксированный элемент; временно отключите position: fixed только в своей тестовой копии или снимайте отдельные секции.
• Обрезан низ: страница подгружает бесконечную ленту; задайте конечную точку и снимайте до неё.
• Вместо части сайта пустое поле: содержимое находится в защищённом iframe или canvas; проверьте отдельный снимок видимой области.
• Файл слишком узкий: снимок сделан в режиме мобильного устройства; отключите Device Mode или задайте нужный viewport.
• Всплывающий баннер перекрыл страницу: закройте его до съёмки и повторно проверьте состояние страницы.

Метод не подходит для точного измерения скорости, доступности и работы интерактивных элементов. Для таких задач нужен браузерный тест, проверка клавиатурой и анализ сети. Скрин фиксирует внешний вид, но не поведение.

Частые вопросы

Можно ли сделать полный скрин сайта без расширения?

Да. Firefox и Chrome имеют встроенные средства. Расширение нужно только ради дополнительной обработки или особого формата.

Почему на полном скрине повторяется меню?

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

Как снять сайт целиком с телефона?

Функции зависят от браузера и системы. Для проверяемого результата проще задать мобильную ширину в Chrome DevTools или Playwright на компьютере.

Подойдёт ли скрин для передачи сайта заказчику?

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