tutorial - plugins cordova android




¿Hay alguna solución real para depurar aplicaciones de Córdoba? (13)

Pasé los últimos dos días tratando de descubrir cómo depurar una aplicación HTML5 que creé usando Cordova 3.2 y que implementé en un dispositivo con Android 2.3. Todos los artículos / publicaciones que he visto proveen hacks en lugar de soluciones reales :( y la mayoría de las veces, ninguno de ellos funciona para mi caso, depura los estilos CSS y el código Angularjs dentro de mi aplicación ...

Hasta ahora lo he probado;

debug.phonegap.com

Inyecté la secuencia de comandos en el archivo index.html luego visité la URL generada en debug.phonegap.com pero no ocurre nada; solo una pagina en blanco

Weinre

La mayoría de los artículos que encontré apuntan a un repositorio Github obsoleto que cuenta con un archivo Jar ... pero no se encuentra :(

Inspección del borde

Funciona y muestra la página web que estoy navegando en la PC dentro del dispositivo móvil. Pero el problema es que usa algún otro navegador integrado (o emulador) que el que ejecuta aplicaciones de teléfono; entonces los resultados no son precisos

Emulador de Chrome

Igual que Edge inspecciona; no permite ver el verdadero web-kit v530 que se envía con Android 2.3.

La solución de sueño

La solución perfecta sería una extensión de Google Chrome (escritorio) que le permite cambiar el navegador de escritorio al mismo que se encuentra en las plataformas Android 2.3; sin emulación, sin hacks, solo el navegador con el kit web v 530.

Lamentablemente, esa solución no existe :( o estoy equivocado?

¿Alguna sugerencia?


¡Me encantó, weinre! Cómo usarlo:

Primero, coloque su index.html (asegúrese de que app.settings.debugUrl esté configurado antes de esto):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

Entonces:

Basado en http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/


¿Has probado 'GapDebug' ? Es gratis.

Parece integrar versiones de Safari Webkit Inspector y Chrome Dev Tools para ofrecer una experiencia de depuración integrada en OS X y Windows.


En Android 4.4+ con SDK instalado:

adb logcat chromium:D SystemWebViewClient:D \*:S

Lo mejor para mí es adjuntar el depurador de Chrome.

Para hacerlo, ejecuta tu aplicación en un emulador o dispositivo (usando $ cordova emulate)

luego, abre Google Chrome y ve a chrome://inspect/

Verás una lista con aplicaciones en ejecución. Tu aplicación debería estar allí. Haga clic en "inspeccionar".

Se abrirá una nueva ventana con herramientas de desarrollador. Allí puede hacer clic en "consola" para verificar si hay errores


Otra opción es Visual Studio, que tiene soporte de prelanzamiento para la depuración de aplicaciones Cordova :

Experiencia de depuración unificada El desarrollo multiplataforma a menudo requiere una herramienta diferente para depurar cada dispositivo, emulador o simulador. Diferentes herramientas significan diferentes flujos de trabajo y pérdida de productividad cada vez que cambia de dispositivo. Con Visual Studio, puede usar las mismas herramientas de depuración de clase mundial para todos los destinos de despliegue, incluidos Windows, el emulador de Android, dispositivos Android conectados, dispositivos iOS y emuladores, y el emulador Apache Ripple.

Ahora que Microsoft lanzó Visual Studio Community Edition de forma gratuita , puede intentarlo sin costo alguno. Deberá descargar Visual Studio y Visual Studio Tools para Apache Cordova .


Por lo que yo sé, la única herramienta productiva para la depuración real en las aplicaciones de Cordova para plataformas Android de 2.2 a 4.3 es jshybugger . Weinre es un inspector, no un depurador. JsHybugger instrumenta su código permitiéndole depurar dentro del android WebView.


Puede usar Intel XDK IDE para desarrollar y depurar emulador o en un dispositivo real

También encontré muy buenas las herramientas de Visual Studio 2015 RC para Córdoba, con su emulador de ondas


Si está utilizando Cordova 3.3 o una versión superior y su dispositivo ejecuta Android 4.4 o una versión superior , puede usar "Depuración remota en Android con Chrome". Las instrucciones completas están aquí:

https://developer.chrome.com/devtools/docs/remote-debugging

En resumen:

  • Conecte el dispositivo a su computadora de escritorio con un cable USB
  • Habilite la depuración de USB en su dispositivo (en mi dispositivo, esto se encuentra en Configuración> Más> Opciones de desarrollador> Depuración de USB)

O bien , si está utilizando Cordova 3.3+ y no tiene un dispositivo físico con 4.4, puede usar un emulador que use Android 4.4+ para ejecutar la aplicación a través del emulador, en su computadora de escritorio.

  • Ejecute su aplicación Cordova en el dispositivo o emulador
  • En Chrome en su computadora de escritorio, ingrese chrome: // inspect / # devices en la barra de direcciones
  • Su dispositivo / emulador se mostrará junto con otros dispositivos reconocidos que están conectados a su computadora, y debajo de su dispositivo habrá detalles de Cordova 'WebView' (básicamente su aplicación Cordova), que se ejecuta en el dispositivo / emulador ( la forma en que funciona Córdoba es que básicamente crea una ventana de 'navegador' en su dispositivo / emulador, dentro del cual hay una 'WebView' que es su aplicación HTML / JavaScript en ejecución)
  • Haga clic en el enlace 'inspeccionar' en la sección 'WebView' donde verá su dispositivo / emulador en la lista. Esto abre las herramientas de desarrollo de Chrome que ahora le permiten depurar su aplicación.
  • Seleccione la pestaña 'fuentes' de las herramientas de desarrollador de Chrome para ver JavaScript que su aplicación Cordova en el dispositivo / emulador se está ejecutando actualmente. Puede agregar puntos de interrupción en el JavaScript que le permiten depurar su código.
  • Además, puede usar la pestaña 'consola' para ver cualquier error (que se mostrará en rojo), o en la parte inferior de la consola verá un aviso '>'. Aquí puede escribir cualquier variable u objeto (por ejemplo, objetos DOM) que desee inspeccionar el valor actual de, y se mostrará el valor.

Si su aplicación ejecuta Cordova 3.3+ y su dispositivo ejecuta Android 4.4 o superior, puede usar la depuración de la vista web de Chrome Remote para depurar su aplicación Cordova.

Para poder hacer eso, primero debe habilitar la depuración del USB en su teléfono.

A continuación, abra la pestaña "inspeccionar dispositivos". En Chrome, vaya a Configuración > Más herramientas > Inspeccionar dispositivos .

Si inicia su aplicación en su dispositivo mientras está conectado a su computadora, The Webview debería aparecer en la lista de dispositivos. Haga clic en el enlace "Inspeccionar" de su Webview y debería aparecer una herramienta de depuración para su WebWord.

Aquí hay un artículo que explica completamente cómo hacerlo: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/


Si usa build de phonegap, hay una opción para habilitar la depuración.

Para compilaciones locales, puede instalar weinre con npm: https://npmjs.org/package/weinre

Y el enlace a weinre docs: http://people.apache.org/~pmuellr/weinre/docs/latest/

Y hay algo llamado depuración remota de Chrome, pero no sé mucho al respecto, puedes echar un vistazo al artículo de Raymond Camden: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android

Documentos para la depuración remota de Chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (si entiendo correctamente, necesitas un dispositivo Android con Chrome como navegador predeterminado) Quizás sea lo más parecido a tu sueño ¿solución?


También puedes depurar con Chrome tus aplicaciones html5

Creo un .bat para abrir Chrome en modo de depuración

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

DARSE CUENTA

Esta respuesta es antigua (enero de 2014) muchas nuevas soluciones de depuración están disponibles desde entonces.

¡Finalmente lo conseguí trabajando! usando weinre y cordova (sin compilación Phonegap) y para ahorrar molestias a futuros desarrolladores, que pueden enfrentar el mismo problema, hice un tutorial de YouTube ;)


Use el monitor del dispositivo Android

Android Device Monitor viene con paquetes con SDK de Android que habrás instalado previamente. En el monitor del dispositivo puede ver todo el registro del dispositivo, excepciones, mensajes de todo. Esto es útil para depurar bloqueos de aplicaciones o cualquier otro problema similar. Para ejecutar esto, vaya a tools / folder dentro de su sdk de Android "/ var / android-sdk-linux / tools". Luego ejecute lo siguiente

chmod +x monitor
./monitor

Si está en Windows, abra directamente el archivo monitor.exe. Hay una pestaña debajo de "LogCat" donde verá todos los mensajes relacionados con el dispositivo. Verá todos los mensajes aquí, incluidas las excepciones de los dispositivos Android que no son visibles. Chrome inspecciona el dispositivo. Asegúrese de crear filtros usando el signo "+" en la pestaña de logcat, para que vea los mensajes solo para su aplicación.

Fuente: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/







mobile-webkit