Tome capturas de pantalla de la página usando Devtools
Ha habido ocasiones en las que necesitaba mostrarle a un cliente o a un compañero de equipo una captura de pantalla completa del estado actual del sitio web o incluso una parte de él, así que he estado usando Captura de pantalla de página completa y, para cualquier otro tipo de capturas de pantalla, la Herramienta de fragmentos de Windows o Snaggit. Si quiero alojarlo en línea como en esta publicación Gyazo, que también tiene un creador de GIF.
Recientemente descubrí que Devtools tiene una herramienta que realiza una captura de pantalla de página completa, ¡no se necesita extensión!
Este no es un pensamiento nuevo, se incluyó en la actualización de Devtools en abril de 2017, pero parece que vivo bajo una roca y no lo descubrí hasta ahora…
Herramientas de desarrollo
Como se indica en la página oficial de Devtools:
Chrome DevTools es un conjunto de herramientas para desarrolladores web integradas directamente en el navegador Google Chrome. DevTools puede ayudarle a editar páginas sobre la marcha y diagnosticar problemas rápidamente, lo que en última instancia le ayuda a crear mejores sitios web y más rápido.
Ejecutando comandos en Devtools
Ya sabes cómo abrir Devtools pero en caso de que lo hayas olvidado y por el bien de esta publicación, ábrelo usando la tecla F12 o el atajo Ctrl + Shift + I. Luego tienes que abrir Run command en el menú dentro de Devtools o usar Ctrl + Shift + P.
Herramienta de captura de pantalla
Si escribes screenshot filtrará los comandos, habrá 4 tipos de métodos de captura de pantalla que puedes usar:
- Captura de pantalla del área
- Captura de pantalla en tamaño completo
- Captura de pantalla del nodo
- Captura de pantalla
Antes de verificar todos los métodos de captura de pantalla, después de que devtools termine de procesar la imagen, la descargará automáticamente con el nombre de la página web.
Captura de pantalla del área
El area screenshot te permitirá seleccionar una parte del sitio web y hacer una captura de pantalla.
Resultado:
Captura de pantalla en tamaño completo
El full size screenshot tomará una captura de pantalla de toda la página web, desde el principio hasta el final.
Resultado:
Captura de pantalla del nodo
El node screenshot le permitirá hacer una captura de pantalla de un nodo seleccionado en el elemento de inspección.
Resultado:
Captura de pantalla
El capture screenshot tomará una captura de pantalla de la página actual sin necesidad de desplazarse y del tamaño del navegador.
Resultado:
