¿Cómo hacer capturas de pantalla con Google Chrome DevTools?

¿Cómo hacer capturas de pantalla con Google Chrome DevTools?
Daniel Esteves

Daniel Esteves

mayo 2, 2020

4 minutos de lectura

––– visitas

If you are searching for the english version

Click here

¿Sabías que podemos tomar capturas desde el navegador sin extensiones?

Normalmente cuando necesitamos sacar capturas de sitios web tipo full-size de todo el sitio o queremos capturar una zona en particular usamos herramientas como:

  • Lightshot
  • FireShot
  • Viejo y confiable Paint con la tecla de PrtScn 🧙‍♂️
  • Entre otros

Pero ahora Chrome DevTools nos brinda una mejor manera de realizar este tipo de capturas de pantalla para cualquier propósito 🤩.

Primero te explicaré para qué sirve Chrome DevTools (y las DevTools de otros navegadores en general):

  • Puedes inspeccionar el código de un sitio web para personalizarlo y moverlo a gusto para hacer ediciones más rápidas y luego pasar al código 🖌
  • Podemos ver en la consola si hay algún error con nuestro código o poder hacer debug de movimientos de nuestra aplicación o sitio ⚠️
  • Podemos ver en la pestaña de "Network" todas las solicitudes que hace nuestro sitio sobre imágenes, estilos, scripts y mucho más 📶
  • Inclusivo desde el DevTools podemos ver la página en diferentes dispositivos como 4K, Laptop, iPad, iPhone y mucho más 📱

Pero en este preciso post vamos a hablar sobre las capturas de pantalla, en otros post vamos a abordar más a fondo cómo podemos sacarle provecho a esta asombrosa herramienta que nos brindan los navegadores.

¿Cómo abrir el Chrome DevTools?

Abrimos nuestro navegador Chrome y presionamos lo siguiente:

  • En Mac: fn + F12
  • En Windows: F12
  • En Linux: F12

Nos encontraremos con esta ventana que se abre en la página que deseemos:

Captura de pantalla de danestves.com con consola del navegador abierta

Como podremos ver a la izquierda se visualiza el código y a la derecha podemos ver las clases que tiene el elemento el cual podemos modificar cualquier CSS que queramos, cambiando colores, tamaños y todo lo que se nos ocurra directamente desde el navegador; en posteriores posts voy a comentar como hago para maquetar sitios usando primero el DevTools y después yéndome a código.

Ahora nos vamos a parar en cualquier elemento usando el mouse y podremos ver todas sus propiedades.

¿Cómo sacar capturas de pantalla?

Ahora que tenemos seleccionado algún elemento, en mi caso la parte del texto con botones del inicio de mi página

Captura de pantalla de danestves.com con una sección seleccionada y consola de navegador abierta

Vamos a apretar las siguientes teclas:

  • En Mac: ⌘ + Shift + P
  • En Windows: Ctrl + Shift + P
  • En Linux: Ctrl + Shift + P

Esto nos abrirá las siguiente opciones:

Captura de pantalla de comandos de consola de Google Chrome

Ahora vamos a proceder a escribir "screenshot":

Captura de pantalla de comandos de consola de Google Chrome

Con el elemento que ya está seleccionado y el comando que hemos escrito vamos a darle click a la opción que dice "Capture node screenshot" y obtendríamos algo así:

Captura de pantalla de sección de la página web danestves.com

¿Mágico no? Sin instalar nada podremos tomar fotos de exactamente cómo se ve una sección de un website para mostrar. Ahora exploremos las demás secciones:

  • Capture area screenshot, nos deja elegir en proporciones cómo queremos sacar nuestra captura de pantalla:
Captura de pantalla vertical del sitio web danestves.com
  • Capture full size screenshot, nos permite tomar una captura de todo el sitio web, ojo nos tomará la captura dependiendo del ancho que tengamos la pantalla en ese momento:
Captura de pantalla de tipo full size del sitio web danestves.com
  • Capture screenshot, nos permite tomar una captura del área visible de la página en ese momento:
Captura de pantalla del área visible del sitio web danestves.com

Genial! Ahora tenemos una manera de sacar capturas de sitios web sin necesidad de instalar nada y sacándole provecho a nuestro navegador 😎

Si tienes alguna duda no olvides que acá abajo hay una sección de discusiones en dónde te puedo ayudar con cualquier problema que tengas siguiendo este post

Ya saben, los veo en el código 👨‍💻

¿Quieres ser el primero en leer mis posts?

Suscríbete al newsletter y tendrás tutoriales, noticias y posts de primera mano.

0 personas se han suscrito al newsletter

Call to action image

¿Qué quieres lograr hoy?

Ponte en contacto a través de este botón para que pueda saber más de tu producto o servicio y podamos discutir la mejor manera de llevarlo a cabo.