Feu una captura de pantalla de la pàgina web amb el marc del dispositiu a Chrome

Una característica menys coneguda de Google Chrome als sistemes operatius d’escriptori és la possibilitat de capturar una captura de pantalla d’una pàgina oberta com si la captura de pantalla feta fos del navegador que s’executa en un dispositiu mòbil. Fins i tot es pot afegir un marc al voltant de la captura de pantalla perquè sembli una foto realista d’un telèfon intel·ligent. A continuació s’explica com es pot fer.

Hi ha una eina especial a Chrome Developer Tools que us permet emular un dispositiu mòbil. És molt útil per als desenvolupadors comprovar l'aspecte dels seus llocs web en telèfons intel·ligents i dispositius de pantalla petita. Permet especificar una mida de pantalla personalitzada o utilitzar mides de dispositiu predefinides com iPhone, iPad, Nexus o Galaxy de Samsung. Un cop es mostra la pàgina oberta a l'emulador del dispositiu, l'usuari pot capturar una captura de pantalla de la pàgina. També és possible habilitar un marc de dispositiu al voltant de la pàgina perquè sembli una foto realista.

Podeu fer-ho de la següent manera.

1. Obriu la pàgina que vulgueu a Chrome i premeu F12. Això obrirà les eines per a desenvolupadors:
2. Feu clic al botó de l'emulador de dispositius mòbils per canviar el mode Eines per a desenvolupadors:
3. A sota del selector de dispositius, seleccioneu algun dispositiu. Per exemple, seleccionaré l'iPhone 6:
4. Ara feu clic al menú de 3 punts a la dreta del selector de dispositiu i marqueu l'opció 'Mostra el marc del dispositiu':
5. Voila, ara la vostra pàgina web es mostra dins d'un bonic marc de dispositiu:
   
   Ara torneu a fer clic al menú dels tres punts i seleccioneu 'Captura de pantalla':

El resultat serà el següent:

Estàs acabat.