Рассмотрим как сделать скриншот страницы или части страницы практически в любом браузере и без дополнительных расширений.
Скриншот в Google Chrome
Google Chrome работает на основе браузера Chromium. Соответственно все браузеры, которые работают на основе Chromium, а это Opera, Brave, Vivaldi, Яндекс Браузер, Edge и другие — также имеют данный функционал.
Браузеры на основе Chromium
Скриншот узла
Открываем инструменты разработчика, например клавишей F12
.
Находясь на вкладке Элементы
делаем правый клик по тегу <HTML>
и выбираем Сделать скриншот узла
. Таким образом получаем скриншот всей страницы. Файл со скриншотом сразу сохраняется в папку с загрузками.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-14-1024x695.png)
Таким образом вы можете сделать скриншот любого DOM узла, нужной для вас части страницы.
Скриншот через консоль с командами
Другой способ сделать скриншот, запустить консоль «Выполнить команду». Сделать это можно как показано на скриншоте или горячими клавишами Command + Shift + P
на MacOS или Ctrl + Shift + P
на Windows.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-15-1024x566.png)
В появившейся консоли вводим «Скриншот» если у вас devtools на русском, или Screenshot — если на английском. Далее выбирайте скриншот чего вам необходимо сделать — всей страницы, только того что видно на экране или конкретного узла.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-16-1024x498.png)
Скриншот будет сразу записан в файл и сохранен в папку с загрузками.
Важный нюанс
Если вы делаете скриншот страницы на которой есть анимация появления элементов, то перед совершением скриншота, прокрутите всю страницу, чтобы анимация сработала и элементы отобразились на странице и попали на скриншот.
Скриншот адаптивной верстки
Также вы можете открыть мобильный предпросмотр и сделать скриншот страницы в варианте мобильной верстки.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-17-1024x530.png)
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/1200x630wa-1024x538.png)
Скриншот в FireFox
Скриншот в браузере FireFox можно настроив браузер и из инструментов разработчика.
Рассмотрим оба варианта.
Первый способ. Настройка браузера
- Нажмите на кнопку меню
, нажмите
Другие инструменты
и выберитеНастройка панели инструментов…
- Откроется специальная вкладка, где вы можете переместить элементы из дополнительного меню на панель инструментов и обратно.
- Переместите элемент
Снимок экрана
на желаемое место на панели инструментов.
- Нажмите
Готово
.
Теперь кнопка скриншотов всегда на виду.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-13-1024x423.png)
Нажмите на неё чтобы сделать скриншот. Выберите вариант Сохранить всю страницу
или Сохранить видимую область
. Далее нажмите на кнопку Загрузить чтобы сохранить скриншот в виде файла.
После заберите файл из загрузок FireFox.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-3-1024x419.png)
Второй способ. Скриншот из инструментов веб-разработчика
Открыть панель веб-разработчика клавишей F12
.
Далее в верхнем правом углу панели веб-разработчика нажмите на иконку с тремя точками •••
и выберите пункт Настройки
.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-9-1024x638.png)
Далее в Настройках в блоке «Доступные кнопки инструментов» найдите строку со скриншотом «Сделать снимок экрана…» и поставьте галочку.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-11-1024x517.png)
Теперь в верхнем правом углу панели веб-разработчика у вас появится кнопка для скриншота всей страницы.
![](https://webcademy.ru/blog/wp-content/uploads/2023/10/image-12-1024x598.png)
Таким образом вы можете сделать скриншот всей страницы. Сразу после клика скриншот будет сохранен в файл и попадет в «Загрузки FireFox».