Realiza capturas de tu sitio web en múltiples resoluciones con pageres

Pageres es una herramienta basada en PhantomJS para realizar capturas de un sitio web desde la consola o mediante la API para Node.js. Cuenta con una larga lista de opciones que convierten esta herramienta en la mejor de su clase. Estas opciones incluyen realizar capturas en múltiples tamaños, añadir un retraso al tiempo de captura, establecer la altura de la captura (cropping) o seleccionar elementos del DOM, entre otras.

Su instalación se lleva a cabo globalmente mediante:

npm install -g pageres-cli

Funcionamiento

Vamos a realizar unas capturas de prueba para comprobar el comportamiento responsivo de nuestro sitio web (podemos ver la lista de comandos mediante pageres --help):

pageres-cli --delay 2 https://www.microsoft.com 380x568 600x768 1024x800

Y los resultados:

Muy útil, ¿verdad? Debido a su integración con Node.js es posible utilizar la librería pageres en nuestros proyectos:

const Pageres = require('pageres')

const test = new Pageres({ delay: 2 })
  .src('https://felixsanz.com', ['380x568', '600x768', '1024x800'])
  .dest(__dirname)

test.run(err => {
  if (err) throw err

  console.log('hecho')
})

También podemos realizar capturas a varios sitios web a la vez simplemente añadiendo más .src() a la cadena.

Otra opción interesante es la captura de elementos del DOM. Por ejemplo, si solo queremos capturar la parte central de nuestro sitio web, utilizaremos la opción --selector '#main' o --selector 'ul.posts'.

Si quieres aprender más sobre pageres y sus opciones, visita su documentación.

Pronto PhantomJS 2.0 verá la luz y seguro que abre nuevas puertas a interesantes aplicaciones como esta.