Делайте скриншоты страниц с помощью Devtools

May 9, 2019 · 2 мин чтения

Available in: Русский · English · Español · Français · Deutsch · Português · 한국어 · 日本語 · 中文 · العربية · हिन्दी · Polski · Türkçe · Bahasa Indonesia · Nederlands

Бывали случаи, когда мне нужно было показать клиенту или товарищу по команде полный снимок экрана текущего состояния веб-сайта или даже его части, поэтому я использовал Снимок экрана всей страницы, а для любых других видов снимков экрана — Инструмент Windows Snippet или Snaggit. Если я хочу разместить его в Интернете, как в этом посте Gyazo, в котором также есть создатель GIF.

Недавно я обнаружил, что в Devtools есть инструмент, который делает скриншот всей страницы без расширения!

Это не новая мысль, она была включена в обновление Devtools в апреле 2017 года, но похоже, что я живу под камнем и не узнал об этом до сих пор…

Инструменты разработчика

Как указано на официальной странице Devtools:

Chrome DevTools — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome. DevTools может помочь вам оперативно редактировать страницы и быстро диагностировать проблемы, что в конечном итоге поможет вам быстрее создавать более качественные веб-сайты.

Запуск команд в Devtools

Вы уже знаете, как открыть Devtools, но если вы просто забыли и ради этого поста, откройте его с помощью ключа F12 или ярлыка Ctrl + Shift + I. Затем вам нужно открыть Run command в меню Devtools или использовать Ctrl + Shift + P.

Инструмент создания снимков экрана

Если вы наберете screenshot команды будут фильтроваться, вы можете использовать 4 типа методов создания снимков экрана:

Скриншот области
Скриншот в полный размер.
Скриншот узла
Сделать снимок экрана

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