Tomar capturas de pantalla con Google DevTool

Ya que de momento estoy viendo bastante aceptación en la encuesta sobre la clase de DevTools de Chrome, antes de plantearla, que creo que tengo algo guay y de valor para daros, vamos a comenzar con pinceladas y atajos.

Si aprendéis a utilizar bien la DevTools o consola de Chrome, os daréis cuenta que no os hacen falta la mitad de extensiones.

Hoy os voy a mostrar un truquito sencillo pero útil, que es a hacer una captura en alta calidad de toda la página.

Abrir la consola de Chrome:

Windows

Haciendo clic derecho y dándole a la opción de inspeccionar.

También puedes hacer el atajo de teclado:

Ctrl+Shift+I

(Control, mas la mayúscula mas la letra i).

Mac

Si eres una persona especial que usa Mac, recuerda estar en Chrome, el atajo es:

⌘+Option+I

Ejecutar un comando

Para eso podemos ir a los 3 puntos verticales de arriba a la derecha y darle a ejecutar comando.

Si lo quieres con atajo de teclado:

Ctrl+Shift+P

Entiendo que en Mac es:

⌘+Option+P

La captura de pantalla:

Si lo tenemos en español:

Escribimos captura y le damos a la opción "Tomar una captura de pantalla de tamaño original".

Si lo tenemos en inglés:

"Capture full size screenshot"

Se descargará una imagen png de la web en vertical con más calidad que mi contenido. Puedes ajustar el tamaño del dispositivo con la propia consola.

PD: Si tu web tiene implementado algún tipo de "lazy loading", te recomiendo hacer Scroll y cargar todos los elementos. Pues solo hará una captura de los elementos cargados.