Weinre: Inspector remoto para depurar css/js/html de tablets y smartphones

El desarrollo web cada día es más complejo, sobre todo desde que se accede a las páginas webs desde diferentes tipos de dispositivos, navegadores, las tareas de depuración para todos estos dispositivos/navegadores puede ser compleja, sobre todo cuando pensamos en tablets y móviles, ya que no traen por si mismos un Inspector web que nos ayude en esta tarea.

Tengo que reconocer que a veces tengo envía a los usuarios de Apple, su vida a veces parece más sencilla, y es que en este caso tienen cierta ventaja, pues pueden conectar los Ipads/Iphones/IpodTouch en sus Macs y depurar como si fuese un navegador normal y un inspector Web. El resto de usuarios no somos tan afortunados con ello.

Pero existe una solución perfecta que todos podemos usar: WEb INspector Remote Weinre. Weinre es un inspector web como son Firebug o Web Inspector (WebKit), la diferencia respecto a estos dos inspectores es que es remoto.

¿Qué significa un inspector web remoto?

La wikipedia definie los inspectores web como El inspector DOM es una de las herramientas de desarrollo web incluidas en la Suite Mozilla y Mozilla Firefox. Su principal propósito es inspeccionar el Document Object Model tree de los documentos basados en HTML y XML.
Un nodo DOM puede seleccionarse desde la estructura, o cliqueando en el cromado del explorador. Además del nodo DOM, hay otras vistas disponibles, incluyendo, box model, XBL bindings, reglas de estilo CSS, estilos computados y JavaScript. Las hojas de estilo de los documentos y los objetos JavaScript se pueden seleccionar desde el árbol. El elemento activo se ilumina con un borde rojo parpadeante, el cual es útil para depurar el código CSS. Además de inspeccionar, también es posible editar, aunque no vía un editor de texto enriquecido.
Fuente.

Quiere decir, que el inspector lo tienes en el ordenador, mientras que el agente que visualiza la web puede ser un móvil, tablet, o un navegador web (por ejemplo firefox o internet explorer) que no están alojados en en el mismo ordenador en el que esta el inspector web.

¿Cómo instalamos Weinre?

Para instalar Weinre mi recomendación es instalar primero node package manager (NPM) junto con Nodejs, para instalar Nodejs recomiendo este artículo: http://sekati.com/etc/install-nodejs-on-debian-squeeze.

Una vez instalado Nodejs y NPM lo siguiente es instalar Weinre de forma sencilla, es suficiente con ejecutar esta orden:
sudo npm -g install weinre

¿Cómo usamos Weinre?

Para usarlo tenemos que llevar a cabo 3 pasos:
Activar el demonio de Weinre.
Configurar nuestra web para usar Weinre
usar Weinre

Activar el demonio de Weinre

Para activar el demonio en Weinre ejecutamos la siguiente orden en la consola de comandos:
weinre --boundHost [hostname | ip address ]

Ejemplo:
weinre --boundHost 192.168.1.159

Para visualizar el inspector tenemos que ir en nuestro navegador, para Weinre yo uso Chrome (manías), y escribir el [hostname |IP]:8080.

Ejemplo:

http://192.168.1.159:8080/


Configurar nuestra web para usar Weinre

Para que Weinre detecte nuestra web y pueda activar el Inspector remote tenemos que agregar este código en el footer de nuestra web:
<script src="http://[ hostname | IP ]:8080/target/target-script-min.js"></script>

Ejemplo:
<script src="http://192.168.1.159:8080/target/target-script-min.js"></script>

Usar Weinre

¿Una vez tenemos montado todo el tinglado como lo hacemos?
Sencillo para navegar simplemente introducimos la [ IP | hostname] en el navegador remoto que queremos usar.
Y en el equipo donde tenemos Weinre ejecuntados nos vamos a:
http://[ IP | hostaname]:8080 y pinchamos en el enlace debug cliente user interface (punto rojo de la imagen anterior).

seleccionar agente que esta visualizando la web con weinre

Una vez tenemos todo funcionando ya podemos navegar con el navegador que queramos que Weinre nos mostrara en el inspector remoto el html/css/js de la web que se esta visitando.

Depurar con Weinre

Ya no será tan difícil poder depurar tablets y smartphones diferentes.