¿Cómo ver los errores de javascript de la aplicación PhoneGap en Xcode?

Quiero depurar mi aplicación PhoneGap en Xcode, pero su console no puede mostrar errores de JavaScript.

La forma más elegante de ver y depurar errores de JavaScript en su aplicación Cordova / PhoneGap es adjuntando el Inspector Web desde su browser Safari a la vista web en su aplicación iOS (pero, como Tom Clarkson ya lo mencionó, necesitará al less iOS 6 )

  • En su iPad o iPhone use la aplicación Configuración para habilitar el Inspector web en la Configuración avanzada para Safari
  • Conecte su dispositivo a una Mac a través de USB (aparecerá en el menu Desarrollar de Safari)
  • Comienza tu aplicación
  • Vaya a la vista web que desea depurar
  • En Mac, desde el menu Safari Desarrollar, select el nombre de su dispositivo y la Aplicación (su página HTML), desde su submenu
  • Se abrirá una window del Inspector Web que le permitirá explorar el DOM, establecer puntos de interrupción, etc.

volcado de pantalla del menú Safari Develop en OS X

Documentación de Apple sobre cómo configurar esto: https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Un exhaustivo tutorial de terceros:
http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

Alternativamente, puede conectar el Inspector web de Chrome a dispositivos iOS después de instalar un proxy de debugging: https://github.com/google/ios-webkit-debug-proxy/ . Esto también abre la posibilidad de hacer la inspección desde Linux. El acceso remoto al HTML, CSS y JavaScript de iOS es incluso posible desde Windows con un proxy dedicado de Chrome: https://github.com/artygus/ios-webkit-debug-proxy-win32 .


Versión mínima de Desktop Safari por versión de iOS

Para cada versión de iOS, necesitará una versión mínima específica de Desktop Safari para usar la inspección remota en la web, consulte la list a continuación.

iOS 6
Safari 6+
iOS7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
Desconocido aún (Safari 8+? 9+? O tal vez incluso la versión de Tecnología de Vista previa ? Ayuda a través de un comentario apreciado.)

Pegue lo siguiente en algún lugar cerca del inicio de su documento para que se ejecute antes de cualquiera de sus otros JavaScript.

<script type="text/javascript"> window.onerror = function(message, url, lineNumber) { console.log("Error: "+message+" in "+url+" at line "+lineNumber); } </script> 

Y disfrute de ver los detalles de sus errores de Javascript en la window de la console Xcode.

ACTUALIZACIÓN: la técnica anterior registrará errores como variables no definidas. Pero los errores de syntax, como la falta de comas, harán que todo el script se rompa sin registrar nada.

Por lo tanto, debe agregar lo siguiente al inicio de su function onDeviceReady :

 console.log('Javascript OK'); 

Si no aparece "JavaScript OK" en la window de logging cuando se inicia la aplicación, significa que tiene un error de syntax en alguna parte.

Para save la búsqueda de comas que faltan, lo más fácil es pegar su código en un validador de Javascript como este:

http://www.javascriptlint.com/online_lint.php

y deja que encuentre el error por ti.

Con suerte, eso le quita un poco de dolor a la debugging.

Tenga en count que con 0.9.2 (lanzado hoy), console.log se ha estandarizado en todas las plataforms para el logging (con debugging.log en desuso).

Hay una function disponible en el WebView de escritorio que no está expuesta en iOS UIWebView que capturará todos los errores (estoy intentando hackear esa funcionalidad en un complemento, que usa API privadas, pero el complemento solo sería para el desarrollo ), pero por ahora haga lo que Kris sugirió anteriormente y ponga try catch bloques en el código y use console.log

Para detectar rápidamente posibles errores de syntax, al momento del desarrollo, tengo la página cargada en Safari de escritorio y la actualizo rápidamente con la console de error de webkit visible.

debug.log enviará posts a la console XCode en Phonegap (lo que le permite registrar el resultado de una exception o realizar alguna debugging), sin embargo, tiene la certeza de que tiene que depurar otros errores de JavaScript en Safari (ya sea en el escritorio o en el iPhone con la console de debugging encendida). Todavía tengo que encontrar un error de Javascript, que fue causado por la ejecución en el iPhone y no estaba presente cuando se depuraba con la console encendida en Safari (aunque sé que hay algunas diferencias entre WebView y Safari en el iPhone).

Solo encontré a Weinre

Es un depurador de javascript remoto para phonegap. Puede configurar su propio server de Weinre, o usar el que se encuentra en http://debug.phonegap.com/

Parece que funciona bien, muy impresionado hasta ahora.

Si usa iOS 6, simplemente puede adjuntar el inspector web de safari (en el menu de desarrollo de Safari de escritorio) a su aplicación y get una debugging completa de javascript.

Hay un par de áreas en las que es un poco limitado: errores de inicio y llamadas a complementos, pero funciona bien para casi cualquier otra cosa.

Para hacer que la debugging de JavaScript funcione en Xcode, veré lo siguiente.

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

En cuanto a la resolución de problemas adicionales, …
Para comenzar, puedes ejecutar la aplicación en Safari en tu PC y utilizar el depurador de Safari (o Chrome, ya que ambos ejecutan motores de renderizado similares). Esto no afectará a los errores lógicos avanzados ni a muchos de sus problemas con la api, pero al less debería ayudar a solucionar muchos problemas (javascript básico, HTML5, etc.).

Para ver todos los errores en la console de javascript, acepto utilizar este detector de events

 <script type="text/javascript"> window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );}; var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error </script> 

Sin embargo, a less que tengas el complemento cordova instalado, no aparecerá en "console" de XCodes. Ve a la carpeta de tu proyecto y escribe esto:

 ? cordova plugin add cordova-plugin-console 

Esto permitirá que el command javascript 'console.log (' some string ') se muestre en XCode.

Tenga en count que necesitará git, etc … pero si está editando su proyecto phonegap en xcode, ¡lo más probable es que lo tenga!

PS Asegúrese de colocar el complemento de script cordova.js antes de cualquier uso de console.log

 <script type="text/javascript" src="/cordova.js"></script> 

Ponga esto al principio de su índice.html

 <script type="text/javascript"> window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);}; var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error </script> 

Aquí hay una manera simple que funcionó para mí:

  • cd al directory que contiene su file index.html en el terminal
  • Inicie un server http usando python invocando (usé python 2.7):

    python -m SimpleHTTPServer

  • Ver la página en safari ingresando la dirección del HTTPServer en un browser, para mí la URL era:

     http://0.0.0.0:8000/ 
  • Abrir herramientas de desarrollador:

    En chrome esto es alt + command + i. Ver la pestaña de la console, puede necesitar actualizar la página.

    En Safari: Safari -> Preferences -> Avanzado -> marque "Mostrar Menú Desarrollar". Desarrollar menu -> Mostrar console de error (o alt + command + c). Recarga la página. Al pulsar CTRL + 5 se abre la pestaña de problemas.