Koalite's blog: weinre: el Firebug para móviles

Koalite's blog: weinre: el Firebug para móviles:
Al empezar a jugar un PhoneGap/Cordova y, sobre todo, al intentar hacer cosas un poco más raras como crear un plugin, a veces se echa de menos tener un depurador para páginas web al estilo de Firebug (enlace) o las Developer Tools de Chrome.

Presentando a weinre

Una alternativa es weinre, WEb INspector REmote, que aunque no tiene todas las funcionalidades de Firebug es bastante potente y nos sacará de más de apuro.
Para poder depurar páginas web en dispositivos móviles, weinre se basa en el siguiente montaje:

Arquitectura de weinre

El servidor de weinre (1) actúa de intermediario entre la página web que vamos a depurar (2) y el equipo desde el que realizaremos la depuración (3).
En las páginas web es necesario inyectar un fichero javascript para que cuando acceda el dispositivo móvil se conecte a weinre. Una vez que esté conectado, con un navegador basado en webkit (Chrome, Safari, Chromium), podremos acceder a weinre y depurar la página.

Usando weinre

En github puedes encontrar el weinre en dos versiones, una aplicación para Mac y un fichero jar que podrás usar en cualquier equipo que tenga java instalado. Usando el fichero jar, para arrancar el servidor hay que utilizar la siguiente línea de comandos:

java -jar weinre.jar -boundHost -all- -hostPort 8080

Esto levanta un servidor web en el puerto 8080 al que puedes acceder para comprobar que todo funciona. Es importante añadir el -boundHost -all- para permitir el acceso remoto a este servidor, ya que por defecto sólo admite conexiones desde localhost.
En la propia página de inicio de weinre a la que puedes acceder con http://localhost:8080 explican las dos formas de activar la conexión a weinre desde el dispositivo móvil:

1. 
   Si puedes modificar código html de la página que quieres depurar, puedes incluir el siguiente script:
   
   Donde SERVIDOR es la IP o el nombre de la máquina que está ejecutando el servidor de weinre.
   
2. Si no puedes tocar la página, puedes usar el bookmarklet que aparece en la página de weinre:
   

   javascript:(function(e){e.setAttribute("src","http://SERVIDOR:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
   

   Donde nuevamente debes cambiar SERVIDOR por la dirección del servidor de weinre.
   

Esta segunda opción es muy cómoda porque basta con crear un favorito/marcador con ese texto en el navegador del dispositivo móvil y, cada vez que visitemos una página que queramos depurar, podemos pulsar el favorito/marcador para iniciar la depuración.
Por desgracia, al usar una aplicación PhoneGap/Cordova no podemos acceder a ningún menú de marcadores, así que no queda más remedio que usar la primera opción y modificar el código de la página que queremos depurar.
Ya sea añadiendo la etiqueta o usando el bookmarklet, el dispositivo móvil se conectará al servidor weinre y podrá ser depurado de forma remota.
Una vez que esté conectado el dispositivo móvil, debemos acceder a weinre con un navegador basado en webkit (Chrome, Safari o Chromium) y pulsar sobre la opción:

debug client user interface: http://localhost:8080/client/#anonymous

Se lanzará una ventana en la que tendremos información del dispositivo al que estamos conectados y que nos permitirá acceder a las distintas opciones de depuración:

Opciones disponibles en weinre

Limitaciones

Actualmente weinre no permite depurar javascript línea a línea. Existen alternativas que sí permiten depurar javascript de forma remota (enlace), pero son bastante más intrusivas y complicadas de desplegar.
Pese a todo, con las herramientas que se incluyen en weinre podemos resolver bastante problemas. Resultan especialmente útiles la inspección de html y, la consola javascript que podemos usar para escribir mensajes de error de una forma más comoda que usando alerts y para ejecutar sentencias arbitrarias de javascript en el dispositivo remoto.

Compartir enlace:

No hay posts relacionados.