Направете екранна снимка на уеб страница с рамка на устройството в Chrome

По-малко известна функция на Google Chrome на настолни операционни системи е възможността да се заснеме екранна снимка на отворена страница, сякаш екранната снимка е на браузъра, работещ на мобилно устройство. Може дори да добави рамка около екранната снимка, така че да изглежда като реалистична снимка на смартфон. Ето как може да се направи.

Има специален инструмент в Chrome Developer Tools, който ви позволява да емулирате мобилно устройство. Много е полезно за разработчиците да проверят как изглеждат техните уеб сайтове на смартфони и устройства с малък екран. Позволява да зададете персонализиран размер на екрана или да използвате предварително дефинирани размери на устройства като iPhone, iPad, Nexus или Galaxy на Samsung. След като отворената страница се покаже в емулатора на устройството, потребителят може да заснеме екранна снимка на страницата. Възможно е също да активирате рамка на устройството около страницата, така че да изглежда като реалистична снимка.

Можете да го направите по следния начин.

1. Отворете желаната страница в Chrome и натиснете F12. Това ще отвори Инструменти за разработчици:
2. Щракнете върху бутона емулатор на мобилно устройство, за да превключите режима на инструментите за разработчици:
3. Под селектора на устройства изберете някое устройство. Например, ще избера iPhone 6:
4. Сега щракнете върху менюто с 3 точки вдясно от селектора на устройства и поставете отметка върху опцията „Показване на рамката на устройството“:
5. Voila, сега вашата уеб страница се показва в хубава рамка на устройството:
   
   Сега щракнете отново върху менюто с три точки и изберете „Заснемане на екранна снимка“:

Резултатът ще бъде както следва:

Ти си готов.