Si alguna vez has construído un sitio web móvil, sabrás que hacer pruebas y depurar a través de múltiples dispositivos puede llegar a ser un dolor de cabeza. Es en esta parte donde Adobe Shadow entra al rescate y permite resolver esta parte del flujo de desarrollo para móviles dándole al desarrollador la habilidad de controlar sus sitios en diferentes dispositivos.

Adobe Shadow

Adobe Shadow se complementa con las herramientas de inspección y depuración permitiendo detectar exactamente las causas de un posible error en nuestras aplicaciones. Una vez que integras a Shadow dentro del proceso de desarrollo, notarás rápidamente como mejoran los tiempos de pruebas en dispositivos móviles, de hecho mientras más dispositivos tengamos que probar mayor será la eficiencia que consigamos con Shadow.

En este pequeño tutorial vamos a revisar como configurar Shadow en el escritorio y en los dispositivos para después discutir algunas de las capacidades de esta herramienta.

Configuración de Adobe Shadow

Es realmente sencillo configurar Adobe Shadow, solo se tienen que seguir 3 pasos para su correcta instalación:

  1. Instalar Shadow en tu computadora
  2. Instalar la extensión de Shadow para Google Chrome
  3. Instalar la aplicación de Shadow en tu dispositivo iOS y/o Android

Una vez que tengas todo instalado hay que seguir los siguientes pasos para comenzar:

  1. Asegurarse de que la aplicación de Shadow este abierta.
  2. Abrir Shadow en cualquiera de los dispositivos donde se quiera realizar la prueba.
  3. Asumiendo que todos los dispositivos están en la misma red que la computadora, debería ser posible ver la computadora debajo de las conexiones disponibles en cada dispositivo.
  4. Cuando seleccionamos alguna conexión, se nos dará un passcode.
  5. Dentro de Chrome en tu computadora, notarás que hay un símbolo con siglas Sd al lado de la barra de dirección que sirve para activar la extensión de Shadow en tu computadora. Hay que dar click en el icono y escribir el passcode del dispositivo.

Después de seguir estos pasos comenzaremos a ver que Shadow en el dispositivo empieza a mostrar cualquier sitio y/o aplicación que naveguemos en nuestra computadora.

Adobe Shadow

Nota: Aunque pueda parecer obvio, si estamos conectados a una VPN podríamos encontrar algunas dificultades para lograr que Shadow en los dispositivos puedan detectar al browser del escritorio.

Después de un emparejamiento inicial, es posible abrir y cerrar Shadow en la computadora o el dispositivo sin tener que volver a escribir el passcode.

Navegación con Shadow

Probar sitios web móviles con Shadow es todavía más sencillo que la configuración inicial, simplemente hay que navegar mediante Chrome y todos los dispositivos que estén conectados irán actualizando los sitios a la par del escritorio. Esto permite entre otras cosas probar la apariencia y el comportamiento de cualquier sitio en una variedad de dispositivos al mismo tiempo. Como extra, Shadow mantendrá el dispositivo alerta evitando que se vaya a modo sleep, para que así no perdamos valioso tiempo desbloqueando el dispositivo cuando queramos volver a probar una aplicación. Tampoco estamos limitados a solo navegar una sola pestaña, Shadow mostrará el contenido de la pestaña actual conforme cambiamos de pestañas en nuestro navegador.

Por supuesto que tener la posibilidad de navegar sitios online es útil pero la mayoría del tiempo vamos a desarrollar de forma local. Por suerte, Shadow incluye soporte para navegar en localhost, permitiendo probar las aplicaciones conforme las vamos desarrollando. Sin embargo, no es posible interpretar archivos mediante file:/// debido a que ese archivo no existe en nuestros dispositivos. Al refrescar una página en un dispositivo en específico se utiliza el gesto común “Pull to Refresh” aunque de forma alternativa también es posible hacer click en el icono de refresh en la extensión de Chrome para recargar todos los dispositivos de manera simultánea.

Depuración con Shadow

Parte de las características de Shadow cubiertas hasta ahora son muy útiles por si mismas, pero la mejor característica de Shadow es su posibilidad de hacer depuración remota de nuestras aplicaciones móviles. Cuando hacemos click en el icono de Adobe Shadow dentro de Chrome, veremos un icono “<>” al lado de cada dispositivo. Al hacer click en este icono se abrirá el panel de depuración que usa weinre a bajo nivel, esto resultará muy familiar para cualquiera que haya utilizado las herramientas de desarrollo de Chrome o Safari.

Adobe Shadow

Una vez en el panel de depuración, es posible ver y editar el DOM para revisar como esos cambios se reflejan en el dispositivo en específico que estamos depurando. Es posible revisar la consola en busca de logs. Todas estas características resultan de mucha utilidad cuando depuramos nuestras aplicaciones web escritas en HTML, CSS y JavaScript.

Screenshots con Adobe Shadow

En la reciente versión de Adobe Shadow que se publico esta semana, es posible tomar capturas de pantalla (screenshots) de cualquier dispositivo o de todos los dispositivos al mismo tiempo. Para tomar una captura de pantalla de los dispositivos, simplemente hay que abrir la extensión de Shadow en Chrome y hacer click en el icono de cámara. Esto va a transferir las capturas de pantalla de los dispositivos a la computadora, simplemente hay que hacer click en el icono de folder a lado del icono de cámara. La siguiente imagen muestra una captura de pantalla tomada desde shadow de nuestro sitio web visto en un iPhone con iOS 5.1.1

Adobe Shadow

Como es posible notar, el sitio se muestra en su versión para dispositivos móviles. La captura de pantalla fue tomada desde el viewport del iPhone así que si hacemos zoom, scroll o activamos cualquier otra opción en nuestro navegador integrado en la aplicación móvil de Shadow se verá reflejado. De manera adicional a la imagen, Shadow guarda un archivo de texto con detalles importantes sobre la URL, así como el tamaño de la página, sistema operativo, modelo del dispositivo y densidad de pixel.

La versión original de este tutorial esta publicada en inglés bajo licencia CC en el portal de Adobe Devnet para una posible consulta, la adaptación fue hecha por Edgar Parada (@edgarparada) instructor de Activ.