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 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:

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

weinre es una aplicación desarrollada con node.js, por lo que para necesitaremos tener instalado node.js y usar su gestor de paquetes, npm. Para instalar weinre, basta con ejecutar:

npm install weinre

Una vez instalado, desde una línea de comandos podemos ejecutar:

weinre --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:

   <script src="http://SERVIDOR:8080/target/target-script-min.js#anonymous"></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:

Limitaciones

Actualmente weinre no permite depurar javascript línea a línea. Existen alternativas que sí permiten depurar javascript de forma remota, 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.

Actualización 31/08/2013

Para los que tengáis dudas sobre la instalación de node.js, Sergio León ha escrito un post muy detallado sobre cómo realizar la instalación de node.js y weinre paso a paso.