Supongamos que has empaquetado una aplicación UI5 en un dispositivo móvil a través de Cordova, y en tu aplicación UI5 has consumido un plugin Cordova que proporciona una API nativa en la plataforma móvil, y te gustaría depurar tu aplicación. En este blog, mostraré los pasos sobre cómo depurar código JavaScript de UI5 y código de plugin Cordova en la plataforma Android.
Continuaré utilizando la aplicación UI5
Paso a paso para crear un plugin Cordova personalizado para Android y consumirlo en tu aplicación UI5
descrita en mi blog anterior para la demostración.
Cómo depurar código UI5 en un dispositivo Android
Supongamos que deseas depurar si tu código UI5 se ejecuta correctamente en un dispositivo Android real. Los pasos para depurar en Chrome son casi los mismos que cuando depuras la aplicación UI5 en una PC, solo son necesarios algunos pasos adicionales.
1. Habilita la opción de depuración USB en tu dispositivo Android. Y luego conecta tu dispositivo móvil a tu PC, abre la herramienta de desarrollo de Chrome:
Ahora deberías ver tu dispositivo Android aquí:
2. Inicia la aplicación UI5 en tu dispositivo móvil, luego deberías encontrar una nueva entrada que aparece debajo del nombre de tu dispositivo. Haz clic en el botón "Inspeccionar":
Ahora cambia a la pestaña Fuentes, y todos los recursos HTML y JavaScript cargados son visibles. Desde aquí en adelante, no hay nada nuevo: puedes establecer puntos de interrupción en cualquier posición. Por ejemplo, en la captura de pantalla a continuación, establecí un punto de interrupción en la línea 38, donde se llama al plugin escrito en Java.
4. Vuelve a iniciar la aplicación, y ahora se activa el punto de interrupción.
Presiona F11, y aún puedes ingresar y verificar cómo se llama al plugin Cordova escrito en Java:
La magia de la llamada de JavaScript a Java comienza en la línea 967. Para más detalles, consulta este blog
Cómo se delega el código JavaScript en el plugin sin conexión OData al código Java nativo en Android
.
Cómo depurar un plugin Cordova desarrollado en Java
Estoy utilizando Android Studio para depurar el código Java.
Supongamos que la carpeta raíz de mi proyecto es JerryUI5HelloWorld, simplemente abre la carpeta android bajo la carpeta de plataformas, como se destaca a continuación.
Una vez que el proyecto está abierto a través de Android Studio, se ve así:
Inicia la aplicación en modo de depuración:
Repite la operación en la interfaz de usuario, y el punto de interrupción establecido anteriormente se activa ahora.
Aún puedes cambiar entre diferentes marcos de la pila de llamadas para observar cómo el plugin personalizado es llamado por el marco Cordova en el lado Java.
Pedro Pascal
Se unió el 07/03/2018