Быстрее всего снять скриншот всей длинной страницы в Chrome можно без расширений: откройте DevTools клавишей F12, нажмите Ctrl + Shift + P (Cmd + Shift + P на Mac), введите «screenshot» и выберите вариант с полным размером. Chrome сохранит один высокий PNG всей страницы. Для множества страниц или для CI то же делает скрипт с одной опцией. Если результат вышел обрезанным, пустым или с повторяющимися шапками, причина почти всегда в ленивой загрузке, ограничении по высоте или фиксированном элементе, и у каждой есть решение ниже.
Способ 1: DevTools, ничего не нужно ставить
- Откройте страницу и дождитесь полной загрузки.
- Нажмите
F12, чтобы открыть DevTools. - Откройте меню команд клавишами
Ctrl + Shift + P(Cmd + Shift + Pна Mac) и введите «screenshot». - Выберите Capture full size screenshot. Chrome скачает PNG.
В том же меню команд есть варианты для видимой области и для выбранного элемента. Документация Chrome подтверждает, что меню открывается этими сочетаниями и содержит команду «Capture area screenshot», а советы по DevTools о скриншотах описывают съёмку всей страницы, узла и области.
Способ 2: скриншот всей страницы в ширине телефона
Сначала выберите устройство в превью выше и посмотрите вёрстку. Чтобы снять всю страницу так, как её рисует телефон, используйте режим устройств: включите панель устройств клавишами Ctrl + Shift + M (Cmd + Shift + M на Mac), выберите устройство, откройте меню More options и выберите Capture full size screenshot. В документации Chrome о режиме устройств есть тот же пункт, а также Show device frame для скриншота с контуром телефона. Подробная пошаговая версия с советами про плотность пикселей и имена файлов есть в статье как сделать мобильный скриншот сайта.
Способ 3: скрипт, для множества страниц или CI
Если нужен один и тот же снимок для десятков страниц, автоматизируйте его. В Playwright это одна опция:
await page.screenshot({ path: 'page.png', fullPage: true });Сначала задайте viewport (например, { width: 390, height: 844 } для снимка размером с телефон), и при каждом запуске скрипт будет делать по одному изображению на страницу. Опция fullPage описана в руководстве Playwright по скриншотам.
Почему скриншот обрезан, пуст или с повторами
Эти проблемы вытекают из того, как работает снимок всей страницы: браузер растягивает viewport до полной высоты и рисует страницу один раз, без прокрутки. В разборе полностраничных скриншотов в Puppeteer перечислены причины и решения, которые подходят для любой съёмки на основе Chrome:
- Лениво загружаемые картинки остаются заглушками, потому что грузятся при попадании в видимую область, а съёмка не прокручивает страницу. Прокрутите страницу до конца и обратно перед съёмкой и дождитесь окончания загрузки картинок.
- Очень высокие страницы обрезаются. Автор сообщает о лимите по умолчанию 16 384 пикселя в Puppeteer, а в некоторых настройках допускается до 32 768. Если страница выше, снимайте её частями и склеивайте.
- Фиксированные и sticky-элементы повторяются или оказываются не на месте. Перед съёмкой переключите их на
position: absoluteили скройте.
Какой способ для какой задачи
| Задача | Лучший способ |
|---|---|
| Одна страница, один раз | Меню команд DevTools |
| Одна страница в ширине телефона | Режим устройств DevTools |
| Десятки страниц или каждый релиз | Скрипт с fullPage: true |
| Страница выше примерно 16 000 пикселей | Части, склеенные вместе |
Частые вопросы
Как сделать скриншот всей страницы в Chrome без расширения?
Откройте DevTools, вызовите меню команд клавишами Ctrl + Shift + P, введите «screenshot» и выберите Capture full size screenshot.
Почему на скриншоте всей страницы нет картинок?
Они загружаются лениво и ни разу не попали в видимую область. Прокрутите страницу полностью, дождитесь загрузки картинок и снимите заново.
Можно ли сделать скриншот всей страницы в размере телефона?
Да. Используйте режим устройств DevTools, выберите устройство и выберите Capture full size screenshot в меню More options.
Источники: Chrome DevTools, меню команд, режим устройств и советы по скриншотам; скриншоты в Playwright; полностраничные скриншоты в Puppeteer, DEV Community, все прочитаны 28 октября 2026 года.