[Скриншоты всей страницы по браузерам](https://openscreenshot.app/ru/full-page-screenshot/)

# Как сделать скриншот всей страницы в Chrome: DevTools или расширение

Используйте команду Capture full size screenshot в Chrome DevTools, узнайте её ограничения и сравните её со снимком всей страницы в OpenScreenShot.

Автор: [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

Chrome умеет делать скриншот всей страницы без расширения, но только из DevTools. Откройте DevTools, откройте Command Menu, введите `screenshot` и выполните **Capture full size screenshot** (сделать полноразмерный скриншот). Chrome сохраняет всю страницу в файл PNG. В обычных меню Chrome нет пункта для скриншота: справка Google перечисляет в разделе **Cast, save, and share** (трансляция, сохранение и отправка) пункты Share, Send to your devices и Create QR code. Для снимка, который можно разметить, экспортировать в PDF или сделать на странице, где прокручивается панель, установите OpenScreenShot и нажмите на его значок.

## Встроенный способ

1. Откройте страницу, которую хотите снять.
2. [Откройте DevTools](https://developer.chrome.com/docs/devtools/open): нажмите `F12` или `Ctrl+Shift+I` в Windows и Linux либо `Cmd+Option+I` в macOS.
3. Откройте [Command Menu](https://developer.chrome.com/docs/devtools/command-menu): нажмите `Ctrl+Shift+P` или `Cmd+Shift+P` в macOS.
4. Введите `screenshot` и выберите **Capture full size screenshot**.
5. Chrome сохранит файл PNG со всей страницей.

Тот же снимок есть в Device Mode. Включите панель эмуляции устройств, откройте её меню **More options** (другие параметры) и выберите пункт полноразмерного скриншота. [Документация Google по Device Mode](https://developer.chrome.com/docs/devtools/device-mode) называет его **Capture a full size screenshot**.

Одного сочетания клавиш для всей последовательности нет. Google не описывает инструментов разметки для этого снимка, поэтому стрелки, текст и скрытие данных придётся делать в другом приложении.

## Ограничения

- **DevTools должны быть открыты.** Команда есть только в Command Menu и в меню Device Mode.
- **Размер страницы.** Chromium отклоняет страницу шириной или высотой от 131 072 CSS-пикселей с ошибкой «Page is too large» (страница слишком большая).
- **Закреплённые и фиксированные элементы.** Для снимка Chromium меняет размер области просмотра на полный размер страницы и скрывает полосы прокрутки. Разделы высотой в окно (`100vh`) и фиксированные шапки или подвалы могут тогда раскладываться относительно этой высокой области. Фиксированный подвал может появиться один раз внизу изображения, а первый экран на всю высоту может растянуться.
- **Отложенная загрузка.** Изображения и фреймы с `loading="lazy"` загружаются, только когда вы прокручиваете к ним. Прокрутите страницу перед запуском команды, иначе части изображения могут остаться пустыми.
- **Внутренние области прокрутки.** Chromium определяет размер снимка по размеру прокрутки самой страницы. Когда страница прокручивает панель внутри оболочки фиксированной высоты, например в веб-приложении или на сайте документации с прокручиваемой панелью содержимого, снимок показывает только одну высоту экрана этой панели.

## С OpenScreenShot

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

1. Установите [OpenScreenShot из Chrome Web Store](https://chromewebstore.google.com/detail/hdabbojjccojlapnfjpdppcpfcnhgmdp) и закрепите его значок на панели инструментов.
2. Откройте страницу и нажмите на значок или `Ctrl+Shift+S` (`⌘⇧S` на macOS).
3. Проверьте результат в редакторе, особенно верх, низ и закреплённую навигацию.
4. Нажмите **Сохранить изображение** и выберите PNG, JPEG, WebP или PDF. **Копировать** и **PDF** рядом с ней завершают работу в один клик.

Если вместо съёмки открывается меню, выберите **Вся страница**. Это поведение задаёт настройка **Режим Express в один клик**. [Руководство по скриншотам всей страницы в Chrome](https://openscreenshot.app/ru/blog/full-page-screenshot-chrome/) шаг за шагом проводит через работу с расширением, включая пропущенные или повторённые разделы. [Справка по режимам съёмки](https://openscreenshot.app/ru/docs/#modes) и [справка по экспорту](https://openscreenshot.app/ru/docs/#export) перечисляют все параметры.

## DevTools и OpenScreenShot: сравнение

- **Запуск:** DevTools нужны два сочетания клавиш и введённая команда. OpenScreenShot нужен один клик или одно сочетание клавиш.
- **Результат:** DevTools сохраняет PNG. OpenScreenShot экспортирует PNG, JPEG, WebP или PDF либо копирует изображение.
- **Правка:** В DevTools её нет. OpenScreenShot открывает редактор со стрелками, текстом, номерами шагов, размытием и обрезкой.
- **Установка:** DevTools уже есть в Chrome. OpenScreenShot — расширение под лицензией MIT, которое обрабатывает снимки локально.

## Что выбрать

- Используйте DevTools для разового PNG обычной страницы на компьютере, где нельзя добавлять расширения.
- Используйте OpenScreenShot для страниц с прокручиваемой внутренней панелью, страниц с закреплёнными шапками и снимков, которые нужно разметить перед отправкой, как в [баг-репортах](https://openscreenshot.app/ru/use-cases/bug-reports/) или при [дизайн-ревью](https://openscreenshot.app/ru/use-cases/design-review/).
- Любой из них можно использовать и в Microsoft Edge; [руководство по Edge](https://openscreenshot.app/ru/full-page-screenshot/edge/) описывает собственный инструмент Screenshot в Edge.

Если съёмка не удаётся на странице браузера вроде `chrome://settings`, см. [поддержку и известные ограничения](https://openscreenshot.app/ru/support/).

## Что дальше

[Прочитайте документацию](https://openscreenshot.app/ru/docs/), [посмотрите все руководства](https://openscreenshot.app/ru/blog/) или [получите помощь со снимком](https://openscreenshot.app/ru/support/).

---

Canonical page: https://openscreenshot.app/ru/full-page-screenshot/chrome/