Hacer una captura de pantalla de la página web con el marco del dispositivo en Chrome

Una característica menos conocida de Google Chrome en los sistemas operativos de escritorio es la capacidad de capturar una captura de pantalla de una página abierta como si la captura de pantalla fuera del navegador que se ejecuta en un dispositivo móvil. Incluso puede agregar un marco alrededor de la captura de pantalla para que parezca una foto realista de un teléfono inteligente. Así es como se puede hacer.

Hay una herramienta especial en Chrome Developer Tools que le permite emular un dispositivo móvil. Es muy útil para los desarrolladores comprobar cómo se ven sus sitios web en teléfonos inteligentes y dispositivos de pantalla pequeña. Permite especificar un tamaño de pantalla personalizado o usar tamaños de dispositivo predefinidos como iPhone, iPad, Nexus o Samsung Galaxy. Una vez que la página abierta se muestra en el emulador del dispositivo, el usuario puede capturar una captura de pantalla de la página. También es posible habilitar un marco de dispositivo alrededor de la página para que se vea como una foto realista.

Puedes hacerlo de la siguiente manera.

1. Abra la página deseada en Chrome y presione F12. Esto abrirá las herramientas de desarrollo:
2. Haga clic en el botón del emulador de dispositivo móvil para cambiar el modo de herramientas de desarrollo:
3. En el selector de dispositivos, seleccione algún dispositivo. Por ejemplo, seleccionaré iPhone 6:
4. Ahora, haga clic en el menú de 3 puntos a la derecha del selector de dispositivo y marque la opción "Mostrar marco del dispositivo":
5. Voila, ahora su página web se muestra dentro de un bonito marco de dispositivo:
   
   Ahora, vuelva a hacer clic en el menú de tres puntos y seleccione "Capturar captura de pantalla":

El resultado será el siguiente:

Estás listo.