Tarde o temprano, cualquier desarrollador web tendrá que hacer una aplicación y testear su funcionamiento en dispositivos móviles. Hasta ahora siempre había confiado en que el navegador de la tableta de turno renderizara correctamente la página. Cierto es que los navegadores de casi cualquier dispositivo móvil han evolucionado enormemente y, utilizando frameworks como jQuery, casi puedes olvidarte de las diferencias entre navegadores desktop y navegadores móviles. Sin embargo (y psicoanalizándome) me percato que tengo una gran dependencia de las herramientas de desarrollo que incluyen los navegadores de escritorio. Es decir, hoy por hoy no sería nadie si me quitas Firebug (Firefox) o las Chrome Developer Tools. Pues bien, cuando estamos “testeando” nuestra aplicación, por ejemplo en un iPad… ¿Dónde están estas herramientas? ¡No hay! <pánico mode=”on” />.
Si tienes la suerte de tener un Mac estás de suerte porque con Safari puedes utilizar las herramientas de desarrollo del navegador de escritorio para depurar el iPad. Yo lo he visto funcionar y va perfecto. Simplemente conectas el iPad a tu Mac y con un par de clics estás depurando la UI del iPad desde el Mac… pero no tengo un Mac :-(
Es en este punto donde quiero explorar distintas vías de depuración remota porque el método actual de ensayo-error, esto es unos cuantos alerts por aquí y unos cuantos console.log por allí, cuando hablamos de CSS puede ser eterno, frustrante diría yo.
Ya he probado Firebug lite, ya sea incluyendo el .js necesario en la página o a través de un bookmarklet. Sin embargo, la experiencia de depuración dista mucho de ser satisfactoria. Sinceramente y en mi humilde opinión, es un poco “quiero y no puedo”.
Hoy mismo y preso de la desesperación, he recordado (no sé cómo) un tweet de @gulnor que hablaba sobre una herramienta de depuración remota multiplataforma. Estoy hablando de weinre. Además, también escribió un post, weinre: El Firebug para móviles que te recomiendo leer porque es la semilla de éste post.
A grandes rasgos, weinre incorpora un inspector web basado en WebKit (básicamente es casi igual a las Chrome Developer Tools) para inspeccionar dispositivos remotos. Es decir, en mi máquina tengo un inspector web que me está mostrando y permitiendo modificar, el contenido que se está mostrando en cualquier dispositivo remoto (que puede ser un iPad, un tableta Android, etc.).
He de reconocer que preparar el entorno para poder utilizar weinre me ha llevado un buen rato de googlear. Es por ello que voy a mostrar los pasos necesarios que he tenido que realizar para poder inspeccionar “felizmente” mi aplicación web en el iPad.
Antes de instalar y configurar weinre, es necesario configurar IIS Express para que acepte conexiones remotas. Por defecto no lo hace, una pena. En estos posts explican los pasos muy bien Accessing an IIS Express site from a remote computer IIS Express enable external request. Lo único que me volvió un poco loco es el paso 2 y el parámetro user=everyone que en un Windows en español es user=Todos (ya sé que a lo mejor es patético, pero te prometo que me llevó un buen rato caer en la cuenta de la localización y sólo fue gracias a esta respuesta en StackOverflow que lo comentaba http://stackoverflow.com/a/16508154).
Una vez que ya puedo acceder remotamente a mi IIS Express, ahora toca el turno de weinre.
Lo primero es instalar Node.js. Yo he descargado la versión Windows Installer (.msi) de 64 bits desde http://nodejs.org/download. Nada especial, siguiente, siguiente…
Después he instalado el paquete de weinre con el gestor de paquetes npm de Node.js. He abierto una línea de comandos desde el atajo creado en la pantalla de inicio de Windows 8 y he escrito el siguiente comando:
npm -g install weinre
Ahora creo una excepción en el firewall de Windows para el puerto 8080 y arranco weinre con este comando:
weinre --boundHost -all-
En este momento ya podemos acceder a la url http://localhost:8080/client/ y veremos que weinre está ahí, esperando clientes a los que inspeccionar.
Está claro que lo que nos hace falta son clientes.
Para poder inspeccionar remotamente un dispositivo hay que incluir el siguiente script en el código de nuestra aplicación:
<script src="http://nuestra_ip:8080/target/target-script-min.js"></script>
Este script es el que hace mucha de la magia de weinre, comunicándose con el servidor y permitiendo la inspección del cliente remoto a través de llamadas AJAX.
Por último, sólo queda seleccionar un cliente (en terminología weinre, un target) de la lista disponible en http://localhost:8080/client/ e interactuar con los paneles del inspector web de weinre y ver como los cambios que realicemos se reflejarán en el dispositivo móvil inspeccionado.
Aunque weinre promete, lógicamente tampoco espero que el web inspector de weinre llegue tan lejos como llegan las Chrome Developer Tools o Firebug, por ejemplo parece que no se puede depurar Javascript. Sin embargo, cualquier cosa más elaborada que el método ensayo-error, será bienvenido y no me quejaré.
Por cierto, si aún no te quedado del todo claro que es esto de weinre, me he arrancado de forma experimental a grabar un pequeño video con el resultado final del experimento. http://www.youtube.com/watch?v=hT6DymRkNLM
Y por último decirte que si tu dispositivo es Android y utilizas Chrome en el mismo, la mejor solución de depuración remota es utilizar la solución nativa que ofrece google Remote Debugging Chrome on Android.
Un saludo!
No hay comentarios:
Publicar un comentario