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

Quiero depurar mi aplicación PhoneGap en Xcode, pero su consola 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 adjuntar el inspector web desde su navegador Safari a la vista web en su aplicación iOS (pero, como Tom Clarkson ya mencionó, necesitará al menos iOS 6 ).

• En su iPad o iPhone, use la aplicación de configuración para habilitar Web Inspector en la configuración avanzada de Safari
• Conecte su dispositivo a una Mac a través de USB (luego aparecerá en el menú Desarrollar de Safari)
• Inicie su aplicación
• Navegue a la vista web que desea depurar
• En Mac, en el menú Desarrollar de Safari, seleccione el nombre de su dispositivo y la aplicación (su página HTML), desde su submenú
• Se abrirá una ventana del Inspector web, que le permitirá navegar por el DOM, establecer puntos de interrupción, etc.

Documentación de Apple sobre cómo configurar esto

Un tutorial completo de terceros

Alternativamente, puede conectar el Inspector web de Chrome a dispositivos iOS después de instalar iOS WebKit Debug Proxy . Esto también abre la posibilidad de realizar la inspección desde Linux o Windows.

El acceso remoto a HTML, CSS y JavaScript de su iOS se ha vuelto aún más flexible hoy en día porque puede instalar el Adaptador WebKit de iOS RemoteDebug sobre el proxy de depuración antes mencionado. Debido a que este adaptador traduce el Protocolo de depuración remota de WebKit al Protocolo de depuración de Chrome , estos (en todas sus plataformas compatibles) están disponibles como herramientas alternativas de depuración e inspección:

• Código de Visual Studio
• DevTools de Chrome
• Depurador de Mozilla

Por cierto, la depuración remota con Safari Web Inspector funciona incluso en combinación con el simulador de iOS.

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 poder utilizar la inspección web remota, consulte la lista a continuación.

ios 6

Safari 6+

ios 7

Safari 6.1+

iOS 8

Safari 7.1 o superior

iOS 9

Safari 8+

iOS 10

Safari 9 + / 10 +? Por favor comenta; prueba siempre Safari Technology Preview

iOS 11

Safari 11+

iOS 12

Safari 12+

Pegue lo siguiente en algún lugar cerca del inicio de su documento para que se ejecute antes que 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 viendo los detalles de sus errores de Javascript en la ventana de la consola de Xcode.

ACTUALIZAR: La técnica anterior registrará errores como variables indefinidas. Pero los errores de sintaxis, 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 función onDeviceReady :

console.log('Javascript OK');

Si no ve "JavaScript OK" en la ventana de registro cuando se inicia la aplicación, significa que tiene un error de sintaxis en alguna parte.

Para evitar la búsqueda de comas faltantes, 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 deje que encuentre el error por usted.

Con suerte, eso le quita algo de dolor a la depuración.

Tenga en cuenta que con 0.9.2 (lanzado hoy), console.log se ha estandarizado en todas las plataformas para el registro (con debug.log obsoleto).

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

Para detectar rápidamente posibles errores de sintaxis, al desarrollar, tengo la página cargada en el escritorio de Safari y la actualizo rápidamente con la consola de errores de webkit visible.

debug.log enviará mensajes a la consola XCode en Phonegap (lo que le permitirá registrar el resultado de una excepción o realizar alguna depuración), sin embargo, tiene razón en que debe depurar otros errores de JavaScript en Safari (ya sea en el escritorio o en el iphone con la consola de depuración encendida). Todavía tengo que encontrar un error de Javascript, que fue causado por la ejecución en el iphone y no estaba presente al depurar con la consola encendida en Safari (aunque sé que hay algunas diferencias entre WebView y Safari en el iphone).

Me acabo de encontrar con Weinre

Es un depurador remoto de JavaScript para phonegap. Puede configurar su propio servidor Weinre o utilizar el de http://debug.phonegap.com/

Parece funcionar bien, muy impresionado hasta ahora.

Si usa iOS 6, simplemente puede adjuntar el inspector web safari (en el menú de desarrollo de safari de escritorio) a su aplicación y obtener la depuración 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 depuración de JavaScript funcione en Xcode, echaría un vistazo a 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 lo que respecta a la resolución de problemas adicionales ...
Para empezar, puede ejecutar la aplicación en safari en su PC y utilizar el depurador de Safari (o Chrome, ya que ambos ejecutan motores de renderización similares). Esto no afectará a los errores de lógica avanzada y muchos de sus problemas de api, pero al menos debería ayudar a solucionar muchos problemas (javascript básico, HTML5, etc.).

Para ver todos los errores en la consola de JavaScript, acepto usar este detector de eventos

<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 menos que tenga instalado el complemento cordova, no se mostrará en la "consola" de XCodes. Vaya a la carpeta de su proyecto y escriba esto:

? cordova plugin add cordova-plugin-console

Esto permitirá que el comando javascript 'console.log (' alguna cadena ') se muestre en XCode.

Tenga en cuenta que necesitará git, etc ... pero si está editando su proyecto phonegap en xcode, lo más probable es que lo tenga.

PD Asegúrese de poner el complemento de secuencia de comandos cordova.js antes de cualquier uso de console.log

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

Pon esto al principio de tu index.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 forma simple que funcionó para mí:

• cd al directorio que contiene su archivo index.html en la terminal

• Inicie un servidor http usando python invocando (usé python 2.7):

  python -m SimpleHTTPServer

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

  http://0.0.0.0:8000/
  

• Herramientas de desarrollador abiertas:

  En Chrome, esto es alt + comando + i. Ver la pestaña de la consola, es posible que deba actualizar la página.

  En Safari: Safari -> Preferencias -> Avanzado -> marque "Mostrar menú de desarrollo". Menú Desarrollar -> Mostrar consola de errores (o alt + comando + c). Recarga la página. Al presionar CTRL + 5 se abre la pestaña de problemas.