¿Cómo tomar capturas de pantalla con Chrome DevTools?

4 minutos de lectura

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

Normalmente cuando necesitamos sacar capturas de sitios web tipo full-size te 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:

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

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:

Ahora vamos a proceder a escribir "screenshot":

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í:

¿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:

  • 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:

  • Capture screenshot, nos permite tomar una captura del área visible de la página en ese momento:

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 👨‍💻

Daniel Esteves © - Todos los derechos reservados