Зробіть знімок екрана веб-сторінки з рамкою пристрою в Chrome

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

У Інструментах розробника Chrome є спеціальний інструмент, який дозволяє емулювати мобільний пристрій. Розробникам дуже корисно перевірити, як виглядають їхні веб-сайти на смартфонах та пристроях з невеликим екраном. Він дозволяє вказати власний розмір екрана або використовувати попередньо визначені розміри пристроїв, як-от iPhone, iPad, Nexus або Samsung Galaxy. Після того, як відкрита сторінка відобразиться в емуляторі пристрою, користувач може зробити знімок екрана сторінки. Також можна включити рамку пристрою навколо сторінки, щоб вона виглядала як реалістична фотографія.

Зробити це можна наступним чином.

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

Результат буде таким:

Ви закінчили.