Как сделать скриншот всей страницы сайта, а не только видимой части?

Как сделать скриншот всей страницы сайта, а не только видимой части? - коротко

В Chrome, Firefox, Edge и Safari откройте инструменты разработчика (F12), вызовите командную палитру (Ctrl + Shift + P) и введите «Full page screenshot» – браузер автоматически прокрутит страницу и сохранит её целиком. При желании можно воспользоваться расширениями (например, Full Page Screen Capture) или скриптами на базе Puppeteer для автоматизации.

Как сделать скриншот всей страницы сайта, а не только видимой части? - развернуто

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

• Встроенные инструменты разработчика браузеров.
  В браузерах Firefox и Chrome есть функционал, позволяющий захватить весь документ. В Firefox достаточно открыть «Инструменты разработчика» (F12), перейти во вкладку «Консоль» и выполнить команду await browser.takeFullPageScreenshot();. В Chrome откройте DevTools, переключитесь в режим «Device Toolbar» (иконка телефона), включите опцию «Capture full size screenshot» в меню «…» и нажмите кнопку захвата. Результат сохраняется в виде PNG‑файла без необходимости установки дополнительных программ.

• Расширения для браузеров.
  На рынке доступны плагины, такие как «Full Page Screen Capture», «Fireshot», «GoFullPage». После установки расширения появляется отдельная кнопка на панели инструментов. Нажатие на неё автоматически прокручивает страницу, собирает все её части и сохраняет готовый скриншот. Этот способ особенно удобен, если требуется делать снимки часто и без лишних настроек.

• Командные утилиты и скрипты.
  Для автоматизации процесса используют инструменты типа Puppeteer, Selenium, Playwright. Пример на Puppeteer:

  const puppeteer = require('puppeteer');
  (async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  await page.screenshot({path: 'full.png', fullPage: true});
  await browser.close();
  })();

  Параметр fullPage: true заставляет движок захватить всю высоту документа. Такие скрипты удобно включать в CI‑процессы, генерировать отчёты или создавать архивы визуального состояния сайта.

• Онлайн‑сервисы.
  Существует множество веб‑сайтов, предлагающих мгновенный снимок полной страницы по URL. Примеры: web-capture.net, screenshot.guru, pagecapture.io. Достаточно ввести адрес нужного ресурса, выбрать формат (PNG, JPEG, PDF) и получить готовый файл. Это хороший вариант, когда нет доступа к локальному браузеру или требуется быстрое решение без установки программ.

• Библиотеки JavaScript, работающие в клиенте.
  Если требуется предоставить пользователю возможность сохранить полную картинку прямо со страницы, можно воспользоваться библиотекой html2canvas. Она рендерит DOM в canvas‑элемент, а затем сохраняет его как изображение. Пример использования:

  html2canvas(document.body, {scale: 2}).then(canvas => {
  const link = document.createElement('a');
  link.download = 'page.png';
  link.href = canvas.toDataURL();
  link.click();
  });

  Учтите, что такие решения могут не захватить содержимое, отрисованное через <iframe> или плагины, но для большинства простых страниц они работают надёжно.

• Утилиты командной строки, основанные на WebKit.
  Программы wkhtmltoimage и cutycapt принимают URL и выводят изображение полной страницы в один шаг. Команда выглядит так:

  wkhtmltoimage --quality 90 https://example.com full.png

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

Каждый из перечисленных методов имеет свои плюсы: встроенные функции браузера – быстрый и простой способ; расширения – удобство для частого применения; скрипты и утилиты – гибкость и возможность автоматизации; онлайн‑сервисы – отсутствие локальной установки; клиентские библиотеки – интерактивность для конечных пользователей. Выбирайте тот, который лучше всего соответствует вашим требованиям, и получайте полные снимки страниц без лишних усилий.