Introducción
Si eres desarrollador web y apuntas a la Web para múltiples dispositivos, es probable que debas probar tus sitios y apps web en varios dispositivos y parámetros de configuración diferentes. Las pruebas sincronizadas pueden ser útiles en este caso y son una manera eficaz de realizar automáticamente la misma interacción en varios dispositivos y navegadores al mismo tiempo.
Las pruebas sincronizadas pueden ayudar a resolver dos problemas particularmente lentos:
- Mantener todos tus dispositivos sincronizados con la URL que quieres probar Cargarlas de forma manual en cada dispositivo es muy reciente, lleva más tiempo y hace que sea más fácil pasar por alto las regresiones.
- Sincronización de interacciones. Poder cargar una página es excelente para las pruebas visuales, pero para las pruebas de interacción, lo ideal es poder sincronizar los desplazamientos, los clics y otros comportamientos.
Afortunadamente, si tienes acceso a algunos de tus dispositivos de destino, hay una serie de herramientas destinadas a mejorar el flujo desde el escritorio hasta los dispositivos móviles. En este artículo, analizaremos Ghostlab, Remote Preview, Adobe Edge Inspect y Grunt.
Herramientas
GhostLab (Mac)
Ghostlab es una aplicación comercial para Mac (USD 49) diseñada para sincronizar pruebas de sitios y apps web en varios dispositivos. Con una configuración mínima, te permite sincronizar simultáneamente lo siguiente:
- Clicks
- Navigation
- Desplazamientos
- Entrada de formularios (p. ej., formularios de acceso o registro)
Esto hace que probar la experiencia del usuario de extremo a extremo de tu sitio en varios dispositivos sea muy sencillo. Una vez que abres la página en un navegador en tus dispositivos, cualquier cambio en la navegación (incluidas las actualizaciones) hace que cualquier otro dispositivo conectado se actualice al instante. Ghostlab admite la visualización de directorios locales, por lo que esta actualización también se produce cuando guardas ediciones en archivos locales y mantienes todo sincronizado siempre.
Creo que configurar Ghostlab es un proceso sencillo. Para comenzar, descarga, instala y ejecuta la prueba (o la versión completa si estás pensando en hacer una compra). Luego, conecta tu Mac y los dispositivos que quieres probar a la misma red Wi-Fi para que sean detectables.
Una vez que Ghostlab se esté ejecutando, puedes hacer clic en "+" para agregar una URL de prueba o simplemente arrastrarla desde la barra de direcciones de tu navegador. De manera alternativa, arrastra la carpeta local que deseas probar a la ventana principal y se creará una entrada nueva del sitio. Para este artículo, estoy probando una versión publicada de http://html5rocks.com. Cheeky, ¿no? ;
Luego, puedes iniciar un nuevo servidor de Ghostlab haciendo clic en el botón de reproducción ">" junto al nombre de tu sitio. Esto inicia un nuevo servidor, disponible en una dirección IP específica de tu red (p. ej., http://192.168.21.43:8080).
Conecté un Nexus 4 y apunté a Chrome para Android a la dirección IP que me proporcionó Ghostlab. Eso es todo lo que debo hacer. Ghostlab no requiere que instales un cliente dedicado por dispositivo, como ocurre con otras soluciones, y eso significa que puedes comenzar a realizar pruebas aún más rápido.
Todos los dispositivos que conectes a la URL de Ghostlab se agregarán a la lista de clientes conectados en la barra lateral que está a la derecha de la ventana principal de Ghostlab. Si haces doble clic en el nombre del dispositivo, se mostrarán detalles adicionales, como el tamaño de la pantalla, el SO, etcétera. Ahora deberías poder probar la navegación y la sincronización de clics. ¡Bien!
Ghostlab también puede mostrar algunas estadísticas sobre los dispositivos conectados, como la cadena UA, el ancho y la altura del viewport, la densidad de píxeles del dispositivo, la relación de aspecto y mucho más. En cualquier momento, puedes cambiar de forma manual la URL base que inspeccionas si haces clic en el engranaje de configuración junto a una entrada. Se abrirá una ventana de configuración similar a la siguiente:
Ahora puedo seleccionar uno de mis otros dispositivos conectados, hacer clic en diferentes vínculos en HTML5Rocks y la navegación se sincroniza en la versión de Chrome para computadoras de escritorio (donde ingresé en la misma URL de Ghostlab) y en todos mis dispositivos.
Lo que es aún mejor es que Ghostlab tiene una opción que te permite usar un proxy en todos los vínculos que pasan por la red para que, en lugar de hacer clic en http://192.168.21.43:8080/www.html5rocks.com navegar a www.html5rocks.com/en/performance (por ejemplo, que cualquier otra solución automática traduzca el vínculo multidispositivo.168.21.43:8080/www.html5rocks.com/en/performance)http://192.168.21.43/www.htm5rocks.com/en/performance
Para habilitar esta función, marca la casilla "Load all content through Ghostlab" (Carga todo el contenido a través de Ghostlab) en la pestaña "Content Load" (Carga de contenido).
Ver cómo funciona:
Ghostlab puede cargar cualquier cantidad de sitios o ventanas en cualquier navegador compatible. Esto no solo te permite probar tu sitio en diferentes resoluciones, sino también cómo se comporta tu código en diferentes navegadores y plataformas. ¡Bien!
Ghostlab te permite establecer la configuración del lugar de trabajo del proyecto del que estás obteniendo una vista previa, y puedes especificar si deseas que se observen y actualicen los cambios en el directorio cuando se detecten. Esto significa que los cambios hacen que se actualicen todos los clientes conectados. Se acabaron las actualizaciones manuales.
Es posible que te preguntes qué más puede hacer Ghostlab. Si bien no es una navaja suiza, también admite la inspección remota de código en dispositivos conectados. En la interfaz principal, si haces doble clic en cualquier nombre de dispositivo, debería aparecer la opción de "depuración", que iniciará una versión de las herramientas para desarrolladores de Chrome para que pruebes con ella.
Ghostlab lo hace posible gracias al inspector web remoto incluido Weinre, que te permite depurar secuencias de comandos y modificar estilos en dispositivos conectados. Al igual que con la experiencia de depuración remota disponible en Chrome para Android, puedes seleccionar elementos, ejecutar algunas generación de perfiles de rendimiento y secuencias de comandos de depuración.
En general, me impresionó la rapidez con la que pude usar Ghostlab para realizar pruebas diarias en todos los dispositivos. Si eres freelancer, es posible que te parezca que el costo de la licencia comercial es un poco alto (consulta más opciones a continuación). Sin embargo, será un placer recomendarle Ghostlab.
Adobe Edge Inspect CC (Mac y Windows)
Adobe Edge Inspect forma parte del paquete de suscripción de Adobe Creative Cloud, pero también está disponible como prueba gratuita. Te permite manejar varios dispositivos iOS y Android con Chrome (a través de la extensión de Chrome del Inspector de Edge), de modo que, si navegas a una URL en particular, todos tus dispositivos conectados permanezcan sincronizados.
A fin de realizar la configuración, primero regístrate para obtener una cuenta de Adobe Creative Cloud o accede a una existente si ya tienes una. Luego, descarga e instala Edge Inspect desde Adobe.com (disponible para Mac y Windows, pero no para Linux). Ten en cuenta que es útil tener a mano los docs de Edge Inspect.
Una vez instalada, te recomendamos obtener la extensión Edge inspect para Chrome, de modo que puedas sincronizar la navegación entre dispositivos conectados.
También deberás instalar un cliente de Edge Inspect en cada dispositivo con el que quieras sincronizar acciones. Afortunadamente, hay clientes disponibles para iOS, Android y Kindle.
Con el proceso de instalación detrás de nosotros, podemos comenzar a inspeccionar nuestras páginas. Para que esta acción funcione, deberás asegurarte de que todos tus dispositivos estén conectados a la misma red.
Inicia Edge Inspect en tu computadora de escritorio, la extensión Edge Inspect en Chrome y, luego, la app en tus dispositivos (consulta a continuación):
Ahora podemos navegar a un sitio como HTML5Rocks.com en la computadora de escritorio y nuestro dispositivo móvil navegará automáticamente a la misma página.
En la extensión, también verás tu dispositivo en la lista con un símbolo <> junto a él, como se muestra en la siguiente captura de pantalla. Si haces clic aquí, se iniciará una instancia de Weinre que te permitirá inspeccionar y depurar tu página.
Weinre es un visualizador de DOM y una consola, y carece de funciones de las Herramientas para desarrolladores de Chrome, como la depuración de JavaScript, la generación de perfiles y la cascada de red. Si bien es el mínimo básico de las herramientas para desarrolladores, es útil para la comprobación de estado del DOM y JavaScript.
La extensión Edge Inspect también admite la generación de capturas de pantalla desde dispositivos conectados con facilidad. Es útil para probar el diseño o simplemente para obtener capturas de tu página y compartirlas con otras personas.
Para los desarrolladores que ya pagan por CC, Edge Inspect es una gran solución. Sin embargo, sí conlleva algunas advertencias, como que cada dispositivo requiere la instalación de un cliente dedicado y un poco de trabajo de configuración adicional que es posible que no encuentres con una alternativa como Ghostlab.
Vista previa remota (Mac, Windows, Linux)
Remote Preview es una herramienta de código abierto en la que alojas páginas HTML y contenido que puedes mostrar en varios dispositivos.
La vista previa remota ejecuta una llamada XHR en un intervalo de 1,100 ms para verificar si cambió una URL en un archivo de configuración. Si detecta que sí lo está, la secuencia de comandos actualiza el atributo src de un iframe cargado en la página de cada dispositivo y carga la página allí. Si no se detectan cambios, la secuencia de comandos continuará sondeando hasta que se realice uno.
Esto es ideal para encadenar dispositivos y cambiar con facilidad una URL en todos ellos. Para comenzar, sigue estos pasos:
- Descarga la vista previa remota y mueve todos los archivos correspondientes a un servidor accesible de forma local. Puede ser Dropbox, un servidor de desarrollo o algo más.
- Cargue "index.html" de esta descarga en todos sus dispositivos de destino. Esta página se utilizará como controlador y cargará la página que quieras probar con un iframe.
- Edita el archivo "url.txt" (incluido en la descarga y que ahora se publica en tu servidor) con la URL de la que deseas obtener una vista previa. Guarda este archivo.
- Remote Preview detectará que el archivo url.txt cambió y actualizará todos los dispositivos conectados para cargar tu URL.
Aunque es una solución de baja fidelidad, la Vista previa remota es gratuita y funciona.
Grunt + Live-Reload (Mac, Windows y Linux)
Grunt (y Yeoman) son herramientas de línea de comandos que se usan para andamiar y compilar proyectos en el frontend. Si ya usas estas herramientas y tienes la configuración de recarga en vivo, es fácil actualizar el flujo de trabajo para habilitar las pruebas multidispositivo, en las que cada cambio que realices en el editor generará una recarga en cualquiera de los dispositivos en los que abriste tu app local.
Es probable que estés acostumbrado a usar grunt server. Cuando se ejecuta desde el directorio raíz de tu proyecto, detecta cualquier cambio en tus archivos de origen y actualiza automáticamente la ventana del navegador. Esto se debe a la tarea Gnt-contrib-watch que ejecutamos como parte del servidor.
Si usaste Yeoman para el andamiaje de tu proyecto, habrá creado un Gruntfile con todo lo que necesitas para hacer que la recarga en vivo funcione en tu escritorio. Para que funcione en varios dispositivos, solo debes cambiar una propiedad, que es hostname (en tu computadora de escritorio). Debería aparecer en connect. Si observas que hostname está configurado como localhost, cámbialo a 0.0.0.0. Luego, ejecuta grunt server y, como de costumbre, se debería abrir una ventana nueva que muestra una vista previa de tu página. Es probable que la URL se vea como http://localhost:9000 (9000 es el puerto).
Inicia una pestaña o terminal nueva y usa ipconfig | grep inet para descubrir la IP interna del sistema. Es posible que se vea así: 192.168.32.20. El último paso es abrir
un navegador como Chrome en el dispositivo con el que quieras sincronizar las recargas en vivo
y escribir esta dirección IP seguida del número de puerto anterior, es decir,
192.169.32.20:9000.
Listo. La función Live-reload ahora debería hacer que los cambios que realices en los archivos fuente en la computadora de escritorio activen las actualizaciones tanto en el navegador para computadoras de escritorio como en el navegador del dispositivo móvil. Excelente.
Yeoman también tiene un generador de dispositivos móviles disponible, lo que facilita la configuración de este flujo de trabajo.
LiveStyle de Emmet
Emmet LiveStyle es un complemento de navegador y editor que lleva la edición de CSS en vivo a tu flujo de trabajo de desarrollo. Actualmente, está disponible para Chrome, Safari y Sublime Text y es compatible con la edición bidireccional (de editor a navegador y viceversa).
Emmet LiveStyle no fuerza una actualización completa del navegador cuando realizas cambios, sino que envía las ediciones de CSS a través del protocolo de depuración remota de Herramientas para desarrolladores. Esto significa que puedes ver los cambios realizados en el editor para computadoras de escritorio en cualquier versión conectada de Chrome, ya sea en la versión para computadoras de escritorio de Chrome o en Chrome para Android.
LiveStyle tiene lo que llama "modo de vista múltiple", que es ideal para probar y ajustar diseños responsivos en ventanas y dispositivos. En el modo de vista múltiple, todas las actualizaciones del editor se aplican a todas las ventanas, al igual que las actualizaciones de Herramientas para desarrolladores para la misma página.
Con el paquete LiveStyle instalado, para comenzar a editar CSS en vivo, haz lo siguiente:
- Inicia Sublime Text y abre un archivo CSS en un proyecto
- Inicia Chrome y ve a la página con el CSS que quieras editar.
- Abre Herramientas para desarrolladores y ve al panel LiveStyle. Marca la opción “Habilitar LiveStyle”. Nota: Las Herramientas para desarrolladores deberán mantenerse abiertas durante tu sesión de edición en vivo para cada ventana a fin de que se apliquen las actualizaciones de diseño.
- Cuando se habilite, se mostrará una lista de hojas de estilo a la izquierda y una lista de tus archivos de editor a la derecha. Selecciona el archivo del editor que se asociará al navegador. Listo. Bum
Ahora la lista de archivos del editor se actualizará automáticamente cuando edites, crees, abras o cierres archivos.
Conclusiones
Las pruebas en dispositivos múltiples siguen siendo un espacio nuevo y dinámico, y hay muchos competidores nuevos en desarrollo. Afortunadamente, existen una serie de herramientas gratuitas y comerciales para garantizar tu compatibilidad y pruebas en una amplia cantidad de conjuntos de dispositivos.
Dicho esto, todavía hay muchas mejoras en esta área, y te recomendamos que pienses en cómo se pueden mejorar aún más las herramientas para realizar pruebas en todos los dispositivos. Cualquier cosa que reduzca el tiempo de configuración y mejore el flujo de trabajo multidispositivo es una ventaja.
Issues
Quizás el mayor problema que me encontré durante las pruebas con estas herramientas fue que los dispositivos se suspendían regularmente. Esto no es un factor decisivo, pero se vuelve molesto después de un tiempo. Siempre que sea posible, te recomendamos que configures los dispositivos para que no se suspendan como una solución alternativa. Sin embargo, ten en cuenta que esto puede agotar la batería, a menos que siempre estés conectado.
Personalmente, no tuve problemas importantes con GhostLab. Es posible que, a USD 49, el precio sea un poco alto. Sin embargo, ten en cuenta que, si lo usas con frecuencia, se paga más o menos. Uno de los mejores aspectos de la configuración era no tener que preocuparte por instalar y administrar un cliente por dispositivo de destino. La misma URL funcionaba en todas partes.
Con Adobe Edge Inspect, me pareció un poco tedioso tener que instalar y usar clientes específicos en cada dispositivo. También descubrí que no actualizaba de manera constante todos los clientes conectados, por lo que tenía que hacerlo por mi cuenta desde la extensión de Chrome. También requiere una suscripción a Creative Cloud y se limita a cargar sitios en el cliente en lugar de en un navegador seleccionado en tus dispositivos. Esto puede limitar tu capacidad para realizar pruebas con exactitud.
La vista previa remota funcionó según lo previsto, pero es muy ligera. Esto significa que, para cualquier tarea más que la de actualizar tu sitio en varios dispositivos, necesitarás una opción de herramientas más avanzada. Por ejemplo, no sincronizará clics ni desplazamientos.
Recomendaciones
Si buscas una solución multiplataforma gratuita para comenzar, te recomiendo usar la vista previa remota. Para quienes trabajan en una empresa que busca una solución paga, GhostLab ha sido siempre excelente en mi experiencia, pero solo está disponible para Mac. Para los usuarios de Windows, Adobe Edge Inspect es la mejor opción y, sin algunas peculiaridades, generalmente funciona.
Grunt y LiveStyle también son excelentes para aumentar tu iteración en vivo durante el desarrollo.