Personalmente soy un técnico de las que piensa que el Debugging no es un mero paso en el desarrollo o una mera funcionalidad en un IDE, creo firmemente que es una combinación muy avanzada con una gran dosis de arte y una muy buena técnica. Al cabo del día es bastante probable que el porcentaje de tiempo que un desarrollador empeña para localizar errores y malos comportamientos en el código y arreglarlos es muy cercano, sino superior, al tiempo que dedica a la creación de código nuevo. Son muchos los errores en el código que nos llevan de cabeza durante horas pero que luego solventamos en un mero instante. Es por ello de vital importancia que como profesional en el mundo del desarrollo tengamos y dominemos técnicas avanzadas para encontrar, determinar y aislar problemas en el código.
Llevo una temporada desarrollando de forma extensiva JavaScript en plataformas móviles. Ya sea a través de Safari, Adobe AIR, PhoneGap, Appcelerator o cualquier otro entorno de ejecución a menudo me encuentro con la necesidad de querer inspeccionar el DOM o algun objeto complejo o simplemente ver las trazas de una forma más avanzada a la que, por ejemplo, permite iOS con la consola de javaScript que incorpora.
Cuando desarrollamos para pantallas grandes o ordenadores tradicionales estas tareas son relativamente fáciles usando las Developer Tools que incoporan Chrome o Safari o Firebug en Firefox. Estas mismas herramientas son las que necesitamos en pantallas más pequeñas (ya sean smartphones o tablets). El problema es que de forma inherente estas herramientas no son usables a tamaños reducidos (incluyo en el pack FirebugLite)
Al igual que FirebugLite podríamos pensar en el uso de cualquier colección de bookmarklets, técnicas que personalmente no me han resultado productivas.
Una solución que estuve investigando hace tiempo fue la implementación de un servidor Comet que permitiria hacer push de datos json desde el dispositivo al escritorio en tiempo real, permitiendo así enrutar las trazas y permitir la inspección del código que se ejecuta en el dispositivo desde mi entorno de desarrollo. Este tipo de desarrollos hoy son relativamente rápidos gracias a iniciativas como APE (Ajax Push Engine).
Basándose en que tanto las Web Developer Tools de Chrome como de Safari se basan en el proyecto Web Inspector de Webkit y añadiendo un servidor Comet para aportar el factor de la comunicación en tiempo real entre extremos, Weinre es una herramienta que permite a los desarrolladores ejecutar un Inspector Web desde una máquina (i.e. entorno de desarrollo) pero mostrando los contenidos de otra página ejecutándose en otro entorno (i.e. en un tablet o smartphone). Weinre es un sub-proyecto de código abierto de PhoneGap lo cual garantiza su evolución.
Así es como funciona:
En la máquina de desarrollo instalas y ejecutas Weinre. A efectos prácticos esto instala un pequeño servidor en tu máquina que por defecto podrás acceder en http://localhost:8080
En la aplicación Web que quieras inspeccionar le añades un pequeño script, servido desde el servidor que acabas de instalar. Por ejemplo:
Este paso no es necesario, en mi caso me he creado un pequeño bookmarklet en mis dispositivos que inyectan el script a cualquier página, de esa forma la técnica no es nada intrusiva o sólo se activa bajo demanda.
Esta es toda la configuración que se necesita, el siguiente paso es pasar a la acción y jugar con el Inspector. Para ello tienes que cargar la url http://localhost:8080/client/#anonymous en tu máquina de desarrollo. Al cargar el inspector este estará pendiente de conexiones entrantes, en ese momento tienes que cargar la página que desees desde el dispositivo. Si todo funciona correctamente desde tu escritorio podrás empezar a inspeccionar y manipular el DOM remoto, ver las trazas remotas, ver la actividad de red, etc. Una de las funcionalidades que me resultan más cómodas es la consola remota en la que puedes escribir cualquier snippet de código y se ejecutará en el extremo remoto.
Weinre incorpora funcionalidades avanzadas que permiten que un mismo servidor pueda inspeccionar múltiples páginas. Esta configuración puede ser interesante para tener un Weinre a nivel de departamento y evitar que cada desarrollador ejecute el suyo propio de forma local. Aunque interesante, en mi experiencia resulta más cómodo que cada desarrollador tenga su propia instancia.
Una de las mancanzas actuales de la herramienta es el Debug de scripts remotos, pero esto no es tanto una limitación de Weinre sino del navegador en los dispositivos.
Por último destacar que Weinre se puede usar no sólo para aplicaciones que se ejecuten en el navegador, siempre que exista un DOM y se pueda ejecutar Javascript Weinre nos permitirá inspeccionar de forma remota ese entorno. Personalmente lo uso con Safari, AIR y PhoneGap y los resultados hasta el momento son excelentes.
Y tú que usas para monitorizar, inspeccionar y debugar Javascript y HTML remoto?
Más información | Weinre En Genbeta Dev | Más herramientas, trucos y utilidades