Si alguna vez has construido un sitio web móvil, sabrás que el probar y depurar a través de múltiples dispositivos puede ser engorroso y, en ocasiones, doloroso. Adobe Edge Inspect ayuda a resolver esto al permitirte controlar fácilmente la navegación a través de múltiples dispositivos. Complementa tu flujo de trabajo con herramientas de depuración e inspección que te ayuden a determinar las causas exactas de un problema. Una vez se ha integrado Edge Inspect dentro del flujo de trabajo, se puede comenzar rápidamente a ver lo mucho que mejora ese flujo de trabajo cuando se prueban aplicaciones basadas en el navegador. Mientras más dispositivos necesites probar para tu aplicación web, más tiempo y esfuerzo te evitara Edge Inspect.

Adobe Edge

Adobe Edge Inspect

Este articulo cubre como configurar Edge Inspect en tu computadora y tus dispositivos y entonces menciona algunas de sus habilidades. Edge Inspect esta disponible con una suscripción gratuita a Creative Cloud. Si compras la suscripción completa a Creative Cloud o la suscripción a Edge Inspect, obtendrás la versión completa. La versión gratuita te permite un solo dispositivo conectado, mientras que la versión completa no tiene limite de dispositivos conectados al mismo tiempo.

Configuración

Una de las partes más impresionantes de Adobe Edge Inspect, para mi, es lo rápido y fácil que se configura. Solo hay tres pasos para la instalación:

  1. Instala Edge Inspect en tu computadora.
  2. Instala la extensión de Chrome.
  3. Instala la aplicación de Edge Inspect en tu dispositivos iOS y/o Android.

Una vez se ha instalado todo, sigue estos pasos para comenzar:

  1. Asegurate de que la aplicación de Edge Inspect esta abierta en tu computadora.
  2. Abre Edge Inspect en cualquier dispositivo que estés intentando probar (ten en mente que estarás limitado a un dispositivo si es que cuentas con la versión gratuita).
  3. Asumiendo que todos los dispositivos se encuentran en la misma red que tu computadora, deberías ver tu computadora listada debajo de las conexiones de cada dispositivo.
  4. Cuando des clic en tu conexión, se te proporcionara un código de acceso.
  5. Dentro de Chrome en tu computadora, notaras el nuevo icono de Edge Inspect (generalmente, esta extensión esta a la derecha de la barra de dirección). Da clic al icono, y escribe el código de acceso a un lado de la lista de dispositivos (Figura 1), para completar el proceso de autorización.
fig01

Figure 1. Adobe Edge Inspect en Chrome

Nota: Aunque puede ser obvio, si estas conectado a una VPN, puede que encuentres dificultades al detectar con tus dispositivos a la computadora.

Después del emparejamiento, puedes abrir y cerrar Edge Inspect en tu computadora o dispositivos sin tener que re-ingresar el código de acceso.

Navegando con Edge Inspect

Probar tus aplicaciones con Edge Inspect es incluso más fácil que la configuración. Simplemente navega usando tu navegador Chrome, y todos los dispositivos que hayan sido conectados seguirán esa navegación. Esto permite probar la apariencia y comportamiento de cualquier pagina en una variedad de dispositivos al mismo tiempo. Además, Edge Inspect evitara que tus dispositivos se suspendan, así que no necesitaras desbloquear los dispositivos cuando quieras probar la pagina. No estas limitado a solo navegar dentro de una sola pestaña; Edge Inspect mostrara el contenido dentro de las pestañas actuales al cambiar de pestaña.

Edge Inspect también te permite ver paginas en modo full screen, removiendo la aplicación predeterminada de Edge Inspect en Chrome. Para activar esta característica, dentro de la extensión de Chrome, da clic al icono para "show full screen on devices". Deberías de ver que la barra superior desaparece en todos los dispositivos al navegar a través de Edge Inspect, y da clic al icono de nuevo dentro de la extensión para hacerla aparecer de nuevo.

Por supuesto, navegar paginas en tiempo real es útil, pero muchas de las veces estarás desarrollando localmente. (Para más detalles sobre como usar Edge Inspect con hosts virtuales, el Blog del Equipo de Edge inspect tiene muchos posts sobre hosts virtuales). Afortunadamente, Edge Inspect soporta completamente la navegación desde tu localhost, permitiéndote probar aplicaciones conforme las vas desarrollando.

No es de extrañar que, Edge Inspect no puede cargar archivos a través de file:/// ya que ese archivo no existe en tus dispositivos. Como puedes esperar, si se esta navegando a través de paginas protegidas por contraseña, tendrás que identificarte en cada dispositivo. Si quieres refrescar la pagina o abrir la pagina dentro del navegador en el dispositivo, simplemente da clic al botón en la parte superior derecha de la ventana de Edge Inspect en el dispositivo. Como un tip, sin embargo, si tu sitio usa autenticación básica de HTTP puedes navegar por la URL usando el formato http://login:password@my.site.com/ para evitar la re-identificación en cada dispositivo.

Si quieres refrescar la pagina o abrirla dentro del navegador del dispositivo, simplemente da clic al botón en la parte superior derecha de la ventana de Edge Inspect en el dispositivo. Como una alternativa, también puedes dar clic en el icono de la extensión de Chrome para refrescar todos los dispositivos conectados simultáneamente. Refrescar limpiara el cache del dispositivo y solicita los nuevos recursos al servidor.

Depurando con Edge Inspect

Una de las mejores características de Edge Inspect es la depuración. Cuando das clic al icono de Edge Inspect en Chrome, veras un icono "<>" junto a cada dispositivo conectado. Dando clic a este icono comenzara la sesión de inspección remota y abrirá el panel de depuración. Edge Inspect usa weinre (web inspector remote) para la inspección remota, aunque parecerá familiar para algunos que han usado las herramientas de desarrollo de Chrome o Safari.

fig02

Figure 2. La ventana de debugging

Una vez en el panel de depuración, puedes ver y editar el DOM y ver estos cambios reflejados en el dispositivo especifico en el que se este depurando la aplicación. Puedes ver los registros de la consola, e incluso muchos elementos que fueron registrados durante el evento onLoad de la pagina. Como probablemente sabes, estas capacidades son muy poderosas cuando se depuran problemas en HTML, CSS y JavaScript.

Actualmente hay unas cuantas limitantes cuando se depura con weinre. La linea de tiempo no devuelve ningún dato, incluso cuando se refresca la pagina, y la pestaña de red solo funciona para XHR. Como puedes esperar, tendrás que disparar los eventos en el dispositivo (esto es, tendrás que dar clic en el botón del dispositivo y no en la computadora) para ver la información enviada a consola. Mientras que puedes editar HTML, CSS y JavaScript, actualmente esto no significa que agregues una nueva linea -no hay opciones Edit As Text o Edit As HTML como en las herramientas de desarrollo de Chrome.

Para aquellos que están familiarizados con los lanzamientos anteriores de Edge Inspect bajo el nombre de Adobe Shadow, pueden estar familiarizados con el hecho de que, por defecto, se basa en los servidores weinre de Adobe. Sin embargo, las versiones recientes te permitirán especificar tu propio servidor weinre al dar clic derecho en la extensión de Chrome y eligiendo "options". Si estas interesado en como configurar un servidor weinre local para este propósito, el post "Usa tu propio servidor Weinre con Adobe Shadow" en el blog RIA Lab de Joseph proporciona una buena guía.

Otra característica muy buena de Edge Inspect es su integración con JS Bin. JS Bin es un sitio muy popular que te permite escribir, modificar y probar tus snippets de HTML, CSS y JavaScript en tiempo real a través del navegador. Edge Inspect permite ver solo la salida de tus script en las pantallas de los dispositivos conectados, permitiéndote editar en tiempo real lo que vez en los dispositivos. Si quieres ver esta característica en acción, revisa el vídeo de demostración de Remy Sharp.

Capturas de pantalla con Edge Inspect

Edge Inspect te permite guardar capturas de pantalla en cualquier dispositivo o todos al mismo tiempo. Para guardar una captura de pantalla a través de los dispositivos, simplemente abre la extensión de Edge Inspect en Chrome y da clic en el botón de la cámara. Esto transferirá las capturas de pantalla desde tus dispositivos a tu computadora. Al dar clic al botón del folder al lado de la cámara, abrirá la carpeta que contiene las capturas de pantalla. Para capturar una sola pantalla de dispositivo, simplemente abre el menú de acción en el dispositivo y da clic a Screenshot. Por ejemplo, la siguiente figura muestra una captura de mi blog ejecutándose en un Samsung Nexus S con Android 4.0 (Ice Cream Sandwich).

Captura de Pantalla

Figura 3. Captura de Pantalla

Como puedes ver, claramente necesito trabajar en esto (aunque mis habilidades de diseño son escasas). Otra cosa interesante a notar: la captura de pantalla es el viewport actual, de modo que si desplazaste o hiciste zoom antes de que se tomara la captura, la imagen contendrá el contenido actual del viewport. Ademas de la imagen, Edge Inspect guarda un archivo de texto con detalles muy útiles como la URL de la pagina, así como el tamaño de la pagina, el sistema operativo, el modelo del dispositivo, las dimensiones de la pantalla, y la densidad de pixeles. Puedes especificar la ubicación donde Edge Inspect coloque las capturas al dar clic derecho en la extencion de Edge Inspect en Chrome y seleccionar "Options". Yo veo esto muy útil para equipos de prueba que necesitan enviar notas a los desarrolladores explicando la naturaleza de un problema que vieron durante la prueba.

A donde ir desde aquí

Si estas construyendo una aplicación web que necesita ser probada en múltiples dispositivos, entonces no hay razón para que no agregues Edge Inspect a tu conjunto de herramientas. Es fácil de configurar, es fácil de usar y trabaja con cualquier IDE o editor, ademas de que ofrece muchas características que probablemente aun no sabes que tiene. Más importante aun, ahorraras tiempo y frustración potencial.

Por favor revisa este foro para más detalles acerca de problemas conocidos y preguntas hechas frecuentemente acerca de Edge Inspect. Además puedes conseguir información y consejos respecto al uso de Edge Inspect al revisar el Blog de Edge Inspect.

En Activ enseñamos el uso de de esta valiosa herramienta y como diseñar y desarrollar sitios como los mencionados en este post en nuestro curso de HTML5 para Móviles

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.