Как сделать скриншот всей страницы сайта: 6 способов на компьютере и телефоне

Какой способ выбрать: сводная таблица

Если нужен просто снимок для себя — берите любой встроенный способ. Если снимок уйдёт подрядчику с правками, удобнее Яндекс Браузер: стрелки, подписи и размытие личных данных там есть сразу.

Способ 1. Chrome и Edge: команда в инструментах разработчика

Отдельной кнопки «скриншот страницы» в обычном меню Chrome нет, но она есть в инструментах разработчика (DevTools — панель, которую открывают разработчики, чтобы смотреть код страницы). Пугаться не надо: код трогать не придётся.

1. Откройте нужную страницу и прокрутите её до самого низа, а потом вернитесь наверх. Так подгрузятся все картинки.
2. Нажмите F12 (на Mac — Cmd + Option + I). Справа или снизу откроется панель с кодом.
3. Нажмите Ctrl + Shift + P (на Mac — Cmd + Shift + P). Появится строка команд.
4. Начните вводить «screenshot». Если интерфейс инструментов переведён на русский, названия команд тоже будут на русском, ищите по слову «скриншот».
5. Выберите «Capture full size screenshot» — снимок всей страницы. «Capture screenshot» снимет только видимую часть, «Capture area screenshot» — выделенную мышкой область.
6. Файл PNG сохранится в папку загрузок.

Тот же пункт есть в меню режима устройства. Это описано в документации Chrome DevTools: в меню «More options» есть «Capture screenshot» для видимой части и «Capture a full size screenshot» для всей страницы. Команды строки команд, включая снимок области, описаны в разделе про командное меню.

Edge сделан на том же движке, поэтому всё работает так же: F12 → Ctrl + Shift + P → команда со словом screenshot. В Edge есть и собственный инструмент снимков веб-страниц в меню браузера, но путь к нему меняется от версии к версии, а команда в инструментах разработчика стабильна.

Способ 2. Firefox: встроенные скриншоты

В Firefox снимок всей страницы — штатная функция, без инструментов разработчика. Порядок по справке Firefox:

1. Щёлкните правой кнопкой мыши по пустому месту страницы (не по ссылке и не по картинке) и выберите «Сделать снимок экрана». Или нажмите Ctrl + Shift + S, на Mac — Cmd + Shift + S.
2. В правом верхнем углу выберите «Сохранить всю страницу». Вариант «Сохранить видимую область» снимет только то, что сейчас на экране.
3. Нажмите «Загрузить», чтобы сохранить PNG в папку загрузок, или «Копировать», чтобы сразу вставить картинку в мессенджер.

Если снимаете часто, кнопку «Снимок экрана» можно вынести на панель инструментов через настройку панели. Ещё одна полезная мелочь: при наведении курсора Firefox сам подсвечивает отдельные блоки страницы. Щелчок по блоку — и у вас снимок только шапки или только формы заявки, без ручного выделения.

Способ 3. Яндекс Браузер: значок на боковой панели

В Яндекс Браузере скриншоты встроены вместе с простым редактором. По справке Яндекс Браузера:

1. На боковой панели нажмите значок «Скриншот».
2. Выберите «Веб-страница» — это снимок всей страницы сайта. Есть ещё «Выделенная область» и «Весь экран».
3. Откроется окно редактирования. Здесь можно добавить стрелки, рамки, текст, пометить маркером, обрезать снимок и размыть часть изображения — например, телефоны клиентов в заявках.
4. Внизу справа выберите «Копировать», «Сохранить» (файл PNG) или «Загрузить на Яндекс Диск». В последнем случае браузер даст ссылку на снимок, если вы вошли в аккаунт Яндекса.

Если значка на боковой панели нет, его включают в меню боковой панели в разделе инструментов, а сами скриншоты — в настройках браузера, раздел «Инструменты». Там же назначаются горячие клавиши для каждого вида снимка.

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

Способ 4. Safari на Mac: веб-инспектор или PDF

У Safari на Mac нет отдельной кнопки «вся страница», но есть два рабочих варианта.

Снимок через веб-инспектор. Сначала включите функции для разработчиков: Safari → Настройки → Дополнения → «Показывать функции для веб-разработчиков» (в разных версиях пункт называется чуть по-разному). Дальше:

1. Откройте страницу и прокрутите её до конца.
2. Нажмите Cmd + Option + I — откроется веб-инспектор.
3. Во вкладке с элементами страницы найдите самую верхнюю строку <html>.
4. Щёлкните по ней правой кнопкой и выберите пункт со снимком экрана (в английском интерфейсе он называется Capture Screenshot).

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

PDF через печать. Это стандартный путь macOS: Файл → Напечатать, в настройках печати включите печать фона, затем внизу окна нажмите PDF и сохраните файл. Минус в том, что страница разрезается на листы А4, а вёрстка при печати может отличаться от экранной. Для согласования правок дизайна такой вариант слабее, для архива текста сойдёт.

Способ 5. iPhone: «Вся страница» в Safari

Снимок всей страницы на iPhone делается из обычного скриншота. По руководству пользователя iPhone:

1. Откройте сайт в Safari.
2. Сделайте скриншот: одновременно нажмите боковую кнопку и кнопку увеличения громкости. На моделях с кнопкой «Домой» — «Домой» и боковую кнопку.
3. Коснитесь миниатюры снимка в левом нижнем углу.
4. Вверху выберите «Вся страница». Справа появится полоса с уменьшенной копией всей страницы, по ней можно пролистать снимок.
5. Сохраните результат.

Важная особенность: снимок всей страницы обычно сохраняется не в «Фото», а как PDF в приложение «Файлы». Если ищете его в галерее и не находите — проверьте «Файлы». Функция работает в Safari и не во всех сторонних браузерах.

Для правок это самый честный способ увидеть мобильную версию: вы снимаете то, что видит клиент на своём телефоне, с реальными шрифтами и всплывающими окнами.

Способ 6. Android: скриншот с прокруткой

На Android всё зависит от версии системы и производителя. По справке Android для устройств на Android 12 и выше:

1. Откройте страницу в браузере.
2. Одновременно нажмите кнопки питания и уменьшения громкости.
3. Внизу экрана выберите «Увеличить площадь скриншота».
4. Растяните рамку на нужную длину и сохраните.

У Samsung, Xiaomi, Honor и других производителей кнопка может называться иначе: «Захват прокрутки», «Длинный скриншот», «Прокрутка». Если ничего похожего не появилось, поищите инструкцию на сайте производителя телефона. В некоторых браузерах и приложениях длинный скриншот недоступен — тогда откройте страницу в Chrome или в стандартном браузере телефона.

Как снять мобильную версию сайта с компьютера

Бывает, что телефона под рукой нет, но показать подрядчику, как сайт выглядит на узком экране, нужно. В Chrome, Edge и Яндекс Браузере (он тоже на движке Chromium) это делается так:

1. Откройте инструменты разработчика (F12).
2. Нажмите значок телефона и планшета в левом верхнем углу панели или Ctrl + Shift + M. Страница перестроится в режим устройства.
3. Вверху выберите модель телефона или введите ширину вручную: 360, 390 или 430 пикселей покрывают большинство современных смартфонов.
4. Обновите страницу, чтобы сайт загрузился как на телефоне.
5. Откройте меню с тремя точками над страницей и выберите «Capture full size screenshot».

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

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

Встроенные способы снимают страницу «как есть», а современные сайты к этому не всегда готовы. Типичные проблемы и что с ними делать:

Расширения и онлайн-сервисы. Если встроенные способы режут страницу, попробуйте расширение для полного скриншота из каталога браузера: оно прокручивает страницу и склеивает кадры. Онлайн-сервисы, где вставляют адрес и получают снимок, удобны для публичных страниц, но не подходят для личного кабинета или страницы за паролем: сервис увидит страницу не вашими глазами. И помните, что расширению вы даёте доступ к содержимому страниц. Для админки сайта и кабинета банка лучше обойтись встроенными средствами.

Частые ошибки

• Снимать страницу, не прокрутив её: половина картинок выйдет пустой.
• Отправлять подрядчику скриншот видимой части и писать «внизу поправьте». Какое «внизу» — непонятно.
• Снимать мобильную версию на компьютере, просто сузив окно браузера. Часть сайтов определяет телефон иначе, и вы увидите не то, что видит клиент.
• Отправлять снимок с открытыми заявками, телефонами и почтами клиентов. Перед отправкой размойте личные данные.
• Сжимать длинный скриншот в мессенджере до нечитаемого состояния. Отправляйте файлом, а не фото.

Как отправить скриншот подрядчику, чтобы правки поняли с первого раза

Скриншот — главный инструмент согласования правок. Хороший снимок экономит время обеим сторонам: подрядчик не гадает, вы не объясняете по телефону.

Что должно быть на снимке или рядом с ним:

1. Адрес страницы. Ссылкой в сообщении, а не словами «на странице про услуги».
2. Устройство и ширина. «iPhone, Safari» или «компьютер, ширина 1440». Ошибка на телефоне и на ноутбуке — две разные задачи.
3. Пометки прямо на снимке. Стрелка или рамка и номер правки. Номер дублируется в тексте: «1 — заменить телефон на +7…, 2 — убрать блок с акцией».
4. Что сейчас и что должно быть. «Сейчас кнопка налезает на текст — должна быть под ним».
5. Одним сообщением. Все правки по странице — одним снимком и одним списком, а не десятью сообщениями в течение дня.

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

Условный пример: сколько стоят правки «по кусочкам»

Пример условный, не кейс студии. Владелец стоматологии в Уфе хочет поправить 12 мелочей на сайте: телефон в шапке, цены на две услуги, фото врача, кнопку записи на телефоне. Подрядчик работает почасово, 2 000 ₽ в час.

Вариант первый: правки приходят в мессенджер по одной в течение недели, словами, без снимков. На каждую уходит время на уточнение «где именно?», переключение между задачами и повторную проверку. В сумме набегает 5 часов, это 10 000 ₽, и две правки сделаны не там.

Вариант второй: длинный скриншот главной и мобильной версии, 12 пронумерованных стрелок и список одним сообщением. Подрядчик укладывается в 2 часа, это 4 000 ₽, и переделок нет. Разница — 6 000 ₽ и неделя ожидания, а сам скриншот занял пять минут.

Если вы смотрите на свой сайт и понимаете, что мелкими правками его уже не спасти, оставьте контакты. Посмотрим сайт на компьютере и телефоне и скажем, что исправить в первую очередь.