Pageres — это Node.js-библиотека для автоматического создания скриншотов веб-страниц в заданных разрешениях. Её основное преимущество — скорость: она способна сгенерировать 100 снимков для 10 сайтов чуть более чем за минуту. Инструмент будет полезен разработчикам и дизайнерам, которым нужно быстро проверить адаптивность вёрстки или подготовить превью проектов.
Как работает Pageres
Под капотом библиотека использует headless-браузер Puppeteer. Она открывает указанные адреса, эмулирует нужные размеры экрана и сохраняет изображения в папку. С помощью Pageres можно делать скриншоты:
- обычных сайтов по URL;
- локальных HTML-файлов;
- прямого HTML-кода, переданного в команду;
- векторной графики (SVG).
Пример использования
Настройка минимальна: достаточно передать адреса и массив с разрешениями.
import Pageres from 'pageres';
await new Pageres({delay: 2})
.source('https://github.com', ['480x320', '1024x768', '1920x1080'])
.destination('my-screenshots')
.run();Параметр delay задаёт паузу перед снимком, чтобы страница успела прогрузиться. Используйте код с осторожностью.
Ключевые возможности API
Гибкая настройка позволяет решать нестандартные задачи:
crop — по умолчанию снимок делается на всю высоту страницы; при crop: true изображение обрезается строго по высоте экрана.selector — позволяет сфотографировать только конкретный блок (например, шапку или кнопку).hide — скрывает нежелательные элементы перед снимком (баннеры, рекламу, уведомления о cookie).script и css — внедряют собственный JavaScript или стили перед созданием скриншота (можно кликнуть по кнопке, изменить фон и т.п.).darkMode — эмулирует тёмную тему на устройстве пользователя для проверки ночного режима сайта.
Когда Pageres особенно полезен
Инструмент пригодится в нескольких сценариях:
тестирование вёрстки — быстрая проверка сайта на десятках экранов после правок;создание портфолио — автоматическая генерация превью для демонстрации клиентам;мониторинг конкурентов — сбор скриншотов главных страниц по расписанию для анализа изменений;тестирование писем — проверка отображения HTML-писем на экранах разной ширины.
Если вы не хотите писать код на Node.js, у автора есть инструмент pageres-cli, который позволяет делать всё то же самое через командную строку.
Хотите применить Pageres на практике? Уточните, как вы планируете её использовать — в Node.js-коде или через терминал (CLI), и есть ли особые задачи (например, скриншоты по расписанию или авторизация на сайте перед снимком).
