android - how - ¿Hay alguna solución real para depurar aplicaciones de Córdoba?

how to debug cordova app in chrome (19)

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):

 <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:

instalar: sudo npm install -g weinre
ejecutar: weinre --boundHost -all-
abrir en el navegador: http://localhost:8080/client/#anonymous
los objetivos del reloj aparecen al abrir la aplicación

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.

Aquí está la solución usando Phonegap Build. Agregue lo siguiente a su config.xml para poder inspeccionar con la depuración de la vista web remota de Chrome.

En primer lugar, asegúrese de que su etiqueta de widget contenga xmlns: android = "http://schemas.android.com/apk/res/android"

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="me.app.id" version="1.0.0">

A continuación, agregue lo siguiente

<gap:config-file platform="android" parent="/manifest"> <application android:debuggable="true" /> </gap:config-file>

Funciona para mí en Nexus 5, Phonegap 3.7.0.

<preference name="phonegap-version" value="3.7.0" />

Cree la aplicación en Phonegap Build, instale el APK, conecte el teléfono al USB, habilite la depuración del USB en su teléfono y luego visite chrome: // inspect.

Fuente: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

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

Los dispositivos con Android <= 4.0.4 necesitan agregar el complemento https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt

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 depurar aplicaciones de Android Cordova que están instaladas en su teléfono de forma remota desde su computadora a través del cable USB (también puede hacer clic remotamente en la aplicación web como si estuviera viendo la aplicación web desde su compueter) con "Depuración remota de Chrome". También puede depurar la aplicación web vista en el navegador Stock Android o Chrome en Android de esta manera.

Habilite el modo de desarrollador en su dispositivo Android (vaya a configuración -> sobre teléfono -> toque 7x en el número de compilación).
Conecte su computadora con su teléfono a través de un cable USB.
Almuerce Chrome en su computadora y navegue hasta chrome: // inspeccione y haga clic en el botón "Inspeccionar" al lado del dispositivo remoto que desea depurar (en la pestaña "Dispositivos"). O haga clic derecho dentro de Chrome en su computadora -> Inspeccionar -> Costumize y controle DevTools (3 puntos verticales - esquina superior derecha de las herramientas del desarrollador) -> Más herramientas -> Dispositivos remotos -> debajo de Dispositivos en el lado izquierdo, haga clic en dispositivo al que está conectado a través de USB -> haga clic en el botón Inspeccionar para la aplicación que desee.
A continuación, haga clic en "Consola" y podrá depurar JavaScript de la misma manera, como lo haría en una aplicación web normal con las herramientas de desarrollo de Chrome.

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 puede usar un dispositivo con Android 4.4+, entonces puede usar la depuración remota de Chrome incluso en el WebView interno de la aplicación. Es un depurador mucho mejor que Weinre, pero la clave es usar la versión reciente de Android.

Las versiones recientes de Cordova habilitan automáticamente este tipo de depuración siempre que sea una compilación de depuración (está desactivada en las compilaciones de versión).

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?

Solo quiero agregar que puede depurar aplicaciones de Android usando Genymotion . Es MUCHO más rápido que el emulador de stock android.

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 ;)

PARA ANDROID:

Solo necesita activar "depurador remoto USB" dentro de su dispositivo Android y conectarlo con un cable USB. Luego abre tu aplicación en el dispositivo. Chrome detectará el navegador remoto y podrá ver la consola de la misma manera que la que ve cuando usa Chrome localmente.

Utilice este enlace: chrome://inspect/#devices en el navegador Chrome (deberá pegarlo en la barra de navegación).

Si su aplicación falla en el dispositivo, solo necesita ver el registro de la consola dentro de su navegador y ver qué sucede. También puede agregar funcionalidad, cambiar variables y reemplazar funciones de la misma manera que lo hacemos con nuestro navegador local.

Lee este artículo para obtener más información sobre los pasos a seguir.

Esto funcionará SOLO con dispositivos con Android 4.4+.

PARA iOS:

Usa Safari para iOS, sigue estos pasos:

1.En su dispositivo iOS, vaya a Configuración> Safari> Avanzado> Inspector web para habilitar Web Inspector

2. Abre Safari en tu dispositivo iOS.

3. Conéctelo a su computadora a través de USB.

4. Abre Safari en tu computadora.

5.En el menú de Safari, vaya a Desarrollar y busque el nombre de su dispositivo.

6. Seleccione la pestaña que desea depurar.

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/