Iniciandose en la depuración de aplicaciones cordova iOS con el Inspector web de Safari

Siempre que me pongo a intentar ayudar a gente que tiene problemas con cordova en stackoverflow o en foros como phonegapspain veo que la gente se limita a decir que su código no funciona y muchas veces no saben por que ni que pueden hacer para intentar encontrar el error. Cuando digo que intenten depurar no saben muy bien como hacerlo, por lo que me he decidido a escribir esta entrada.

El tutorial es solo para iniciarse, no me voy a meter en profundidad en como depurar aplicacaciones, si no mostrar que esa opción está ahí y como usarla.

Vamos a empezar creando el proyecto y añadiendo la plataforma iOS.

cordova create cordovaDebug es.phonegap.cordovadebug cordovaDebug
cd cordovaDebug
cordova platform add ios

Vamos a usar un ejemplo sencillo, simplemente crearemos una lista de números del 1 al 10, para ello vamos a abrir el index.html y poner un ul con id numbers en cualquier parte (yo lo he puesto al final del div con clase “app”)

<ul id="numbers">
</ul>

Ahora abrimos el index.js y al final del todo creamos la función listNumbers, que partiendo de un array de números lo recorrerá y creará un elemento de la lista nuevo, para finalmente ponerlo todo dentro del ul que pusimos en el index.

function listNumbers(){
    var numberArray = [1,2,3,4,5,6,7,8,9,10];
    var numberList = document.getElementById("numbers");
    var html = "";
    for (var i = 0;i<numberArray.lenght;i++){
        html += "<li>number "+numberArray[i]+"</li>";
    }
    numberList.innerHTML = html;
}

Finalmente llamaremos a la función listNumbers dentro de la función onDeviceReady

app.receivedEvent('deviceready');
listNunbers();

Ejecutamos y veremos que la lista no se muestra, asi que procederemos a depurar para encontrar el error. Para ello tenemos que abrir el navegador safari de mac, pinchamos en Desarrollo y nos aparecerán todos los dispositivos que podemos inspeccionar, en nuestro caso va a ser el iOS Simulator, y también saldrían todas las apps que puedas depurar, en nuestro caso sale la app cordovaDebug, asi que pinchamos en index.html y se nos abrirá el Web Inspector.

 

Inspector_web_safari

NOTA: En caso de no tener el menú de desarrollo visible ir a Safari -> Preferencias -> Avanzado y marcar el checkbox de Mostrar el menú de desarrollo en la barra de menús.

Como no hay manera (o no la he encontrado) de tenerlo abierto antes de ejecutarlo para ver los errores desde el principio, tenemos que recargar

recargar

Nada mas recargar veremos que hay un error:

ReferenceError: Can’t find variable: listNunbers

Nos hemos equivocado y hemos puesto listNunbers en vez de listNumbers al querer ejecutar el método (nos dice hasta en que línea ha sido). Lo cambiamos y volvermos a ejecutar, pero sigue sin funcionar.

Pondremos 3 puntos de ruptura dentro de la función listNumbers y recargamos de nuevo

puntos_ruptura

Se parará en la línea 56. Si ahora pulsamos el botón “Seguir con la ejecución del script” esperaríamos que fuese al siguiente punto de la línea 60, pero se está yendo al de la línea 62, por alguna razón no está ejecutando el bucle for.

Vamos a comprobar que numberArray se haya creado bien, para ello simplemente escribimos numberArray en la consola de depuración, y nos devolverá [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], por lo que está bien.

Ahora pondremos en la consola numberArray.lenght por ser la condición del bucle for, y obtenemos undefined, ¿por que va a estar sin definir la longitud del array? Si nos fijamos bien hemos tenido otro error y hemos escrito lenght en vez de length. Lo cambiamos y ya nos debería sacar la lista con los números del 1 al 10.

Y eso es todo por hoy, la entrada se queda un poco corta en comparación a todo lo que el inspector web permite, pero quería que fuese una presentación de esta herramienta que introdujo Apple en iOS 6 que nos va a ser muy útil para el desarrollo de nuestras aplicaciones, con ella a parte de poder encontrar los posibles errores de javascript y poder depurar paso por paso nuestra ejecución, podremos además inspeccionar todos nuestros elementos del DOM y cambiar el CSS para probar distintos cambios y ver como quedan en tiempo real.

 

Nota Final: Para la elaboración de este tutorial se ha usado la última versión de cordova disponible, actualmente cordova CLI 5.0.0 y cordova iOS 3.8.0, si estás usando una versión distinta podría no funcionar igual, si tienes algún problema no dudes en comentar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *