instalar javascript ios xcode debugging cordova

javascript - instalar - cordova version



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

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

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

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

  • Inicie un servidor http utilizando python invocando (utilicé Python 2.7):

    python -m SimpleHTTPServer

  • Ver la página en Safari ingresando la dirección del servidor HTTPS en un navegador, para mí la URL fue:

    http://0.0.0.0:8000/

  • Abra herramientas de desarrollador:

    En Chrome esto es alt + comando + i. Vea la pestaña de la consola, puede necesitar actualizar la página.

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

La forma más elegante de ver y depurar errores de JavaScript en su aplicación Cordova / PhoneGap es asociar el Inspector Web desde su navegador Safari a la Vista Web en su aplicación iOS (pero, como ya mencionó Tom Clarkson, 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 (aparecerá en el menú Desarrollo de Safari)
  • Comience su aplicación
  • Navega a la vista web que quieres depurar
  • En la Mac, desde el menú Safari Develop, seleccione el nombre de su dispositivo y la aplicación (su página HTML), desde su sub menú
  • Se abrirá una ventana de Web Inspector, que le permitirá navegar por el DOM, establecer puntos de interrupción, etc.

La documentación de las manzanas para configurar esto: https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Un completo 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 depuración: 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 su iOS es incluso posible desde Windows con un proxy de Chrome dedicado: https://github.com/artygus/ios-webkit-debug-proxy-win32 .

Por cierto, la depuración remota con Safari Web Inspector también funciona 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 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+
iOS 9
Safari 8+
iOS 10
Desconocido aún (Safari 9+? 10+? O tal vez incluso la versión de Technology Preview ? Ayuda a través de un comentario apreciado.)
iOS 11
Safari 11+

Me encontré con Weinre

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

Parece funcionar bien, muy impresionado hasta el momento.

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 cuanto a la solución de problemas adicionales ...
Para empezar, podría ejecutar la aplicación en safari en su PC y utilizar el depurador de safari (o Chrome, ya que ambos están ejecutando motores de procesamiento similares). Esto no afectará 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 el complemento cordova instalado, no se mostrará en XCodes "console". Ve a la carpeta de tu proyecto y escribe esto:

? cordova plugin add cordova-plugin-console

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

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

PD Asegúrese de poner el complemento de script cordova.js antes de usar console.log

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

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 consola de Xcode.

ACTUALIZACIÓN: la técnica anterior registrará errores tales como variables indefinidas. Pero los errores de sintaxis, como las comas que faltan, harán que toda la secuencia de comandos se rompa sin iniciar sesión.

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 guardar las comas faltantes, lo más fácil es pegar el código en un validador de Javascript como este:

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

y deja que encuentre el error para ti.

Afortunadamente, eso elimina parte del dolor de la depuración.

Pon esto al comienzo 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>

Si usa iOS 6, simplemente puede adjuntar el inspector de safari web (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 donde es un poco limitado (errores de inicio y llamadas de complemento) pero funciona bien para casi cualquier otra cosa.

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

Hay una función disponible en el escritorio WebView que no está expuesta en iOS UIWebView que detectará todos los errores (estoy tratando de piratear esa funcionalidad en un complemento que usa API privadas, pero el complemento solo será para desarrollo ), pero por ahora haz lo que Kris sugirió anteriormente y pon a prueba los bloques de captura en el código y usa 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 error de webkit visible.

debug.log enviará mensajes a la consola de XCode en Phonegap (lo que le permite 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 Debug Console encendida). Todavía tengo que encontrar un error de Javascript, que fue causado al ejecutar en el iPhone y no estaba presente cuando se depuró con la consola encendida en Safari (aunque sé que hay algunas diferencias entre WebView y Safari en el iPhone).