Сделать снимок экрана веб-страницы с фреймом устройства в Chrome

Менее известной особенностью Google Chrome в операционных системах для настольных ПК является возможность сделать снимок экрана открытой страницы, как если бы сделанный снимок экрана принадлежал браузеру, запущенному на мобильном устройстве. Он даже может добавить рамку вокруг снимка экрана, чтобы он выглядел как реалистичная фотография смартфона. Вот как это можно сделать.

В Chrome Developer Tools есть специальный инструмент, который позволяет имитировать мобильное устройство. Разработчикам очень полезно проверять, как их веб-сайты выглядят на смартфонах и устройствах с маленьким экраном. Он позволяет указать собственный размер экрана или использовать предопределенные размеры устройства, такие как iPhone, iPad, Nexus или Samsung Galaxy. Как только открытая страница отображается в эмуляторе устройства, пользователь может сделать снимок экрана страницы. Также можно включить рамку устройства вокруг страницы, чтобы она выглядела как реалистичная фотография.

Сделать это можно следующим образом.

1. Откройте нужную страницу в Chrome и нажмите F12. Это откроет инструменты разработчика:
2. Нажмите кнопку эмулятора мобильного устройства, чтобы переключить режим инструментов разработчика:
3. Под селектором устройств выберите какое-нибудь устройство. Например, я выберу iPhone 6:
4. Теперь щелкните меню с тремя точками справа от переключателя устройств и отметьте опцию «Показать рамку устройства»:
5. Вуаля, теперь ваша веб-страница отображается внутри красивого фрейма устройства:
   
   Теперь снова щелкните меню с тремя точками и выберите «Сделать снимок экрана»:

Результат будет следующим:

Вы сделали.