Inspeccionar con weinre - CGastrell/phonegap GitHub Wiki

Implementacion

Usaremos el ultimo ejercicio para crear uno nuevo:

phonegap create prueba13 --id com.coderhouse.prueba13 --name "00 Prueba 13" -src prueba12
cd prueba13

En ese ejercicio usamos el plugin de camera y file, instalamos para poder ejecutar correctamente la aplicacion:

phonegap plugin add org.apache.cordova.camera
phonegap plugin add org.apache.cordova.file

Correr weinre

Abrimos otra ventana para correr weinre corriendo cmd, averiguamos nuestra IP (por lo general corriendo ipconfig) y corremos weinre con la IP que obtuvimos:

weinre --boundHost DIRECCION_IP

En este momento ya podemos ver la interfaz de weinre. Abrir el navegador y apuntar a:

http://DIRECCION_IP:8080/client/#anonymous

Incluir script

Incluimos el script como vimos anteriormente. Editamos el archivo index.html y agregamos el script en el <head> (solo la 3er linea, las anteriores son para saber donde ubicarla) cambiando DIRECCION_IP por la direccion que hayan obtenido de su maquina:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="http://DIRECCION_IP:8080/target/target-script-min.js#anonymous"></script>

console.log()

Modificamos el codigo para escribir a la consola. En este caso, la consola sera el inspector de weinre. Editamos el archivo js/index.js y agregamos llamadas a console.log().:

//...
function init() {
  //para saber cuando se ejecuta init
  console.log('init');

  // Configuracion de JQM para phonegap
  //...
  //...
var fileApi = {
  initialize: function(){
    console.log('Inicializando fileApi');
    window.resolveLocal...
    //...
var camara = {
  initialize: function() {
    console.log('Inicializando camara...');
    if(localStorage.galeria) {
    //...

Correr la aplicacion

Corremos la aplicacion:

phonegap run android

Y volvemos al navegador donde tenemos la interfaz de weinre. Una vez que la aplicacion arranque deberiamos ver la conexion en la interfaz de weinre.

weinre soporta multiples conexiones pero solo podemos interactuar con ellas de una a la vez. La conexion activa en la interfaz de weinre es la que figura de color verde. Por defecto weinre activara una conexion si es la unica, pero en el caso que no sea asi (la conexion permanece en negro), hacemos click sobre la conexion y esta se activara poniendose en verde.

Una vez que hayamos hecho esto podemos navegar las pestañas de weinre para obtener informacion de nuestra aplicacion: Elements, Resources, Network, Timeline y Console

En Console deberian aparecer los mensajes que agregamos en el codigo.

Pruebas en consola

La consola no solo nos da los mensajes que pedimos, nos permite ejecutar codigo de manera inmediata. Poder ejecutar codigo nos dara la ventaja de no tener que compilar la aplicacion una y otra vez. Ademas nos mostrara cuando tengamos un error y, con suerte, nos indicara en que lugar del codigo esta el error.