¿Existe una solución real para depurar las aplicaciones de cordova [cerrado]

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

Hasta ahora lo probé;

debug.phonegap.com

Inyecté el script en el index.htmlarchivo y luego visité la URL generada en debug.phonegap.com pero no sucede nada; Solo una página en blanco.

Weinre

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

Inspección de 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 no sea el que ejecuta las aplicaciones phonegap; entonces los resultados no son exactos.

Emulador de Chrome

Igual que Edge inspeccionar; no permite ver el kit web v530 real que se incluye con Android 2.3.

La solucion soñada

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

Desafortunadamente, tal solución no existe :( o estoy equivocado?

¿Alguna sugerencia?

PARA ANDROID:

Solo necesita habilitar el "depurador remoto USB" en su dispositivo Android y enchufarlo con un cable USB. Luego abra su aplicación en el dispositivo. Chrome detectará el navegador remoto y puede ver la consola de la misma manera en que la ve cuando usa Chrome localmente.

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

Si su aplicación se bloquea 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 anular funciones de la misma manera que lo hacemos con nuestro navegador local.

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

Use Safari para iOS, siga estos pasos:

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

2. Abra Safari en su dispositivo iOS.

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

4.Abra Safari en su 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.

AVISO

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

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

Si puede usar un dispositivo Android 4.4+, 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 compilaciones 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 liberación).

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, abra Google Chrome y vaya a chrome://inspect/

Verá 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

Si su aplicación ejecuta Cordova 3.3+ y su dispositivo ejecuta Android 4.4+, puede usar la depuración remota de Chrome Webview para depurar su aplicación Cordova.

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

Luego 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 aparecerá una herramienta de depuración para su Webview.

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

¿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.

Otra opción es Visual Studio, que tiene soporte de prelanzamiento para depurar 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 objetivos de implementación, incluidos Windows, el emulador de Android, dispositivos Android conectados, dispositivos y emuladores de iOS y el emulador Apache Ripple.

Ahora que Microsoft ha lanzado la edición Visual Studio Community de forma gratuita , puede probarlo sin costo alguno. Deberá descargar Visual Studio y Visual Studio Tools para Apache Cordova .

Hasta donde 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 de Android WebView.

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

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

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

Si usa la compilación 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 los documentos de Weinre: 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 entendí correctamente, necesita un dispositivo Android con Chrome como navegador predeterminado) Quizás el más cercano a su sueño ¿solución?

En Android 4.4+ con SDK instalado:

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

Si está utilizando Cordova 3.3 o superior y su dispositivo ejecuta Android 4.4 o 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 , 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: // inspeccionar / # dispositivos en la barra de direcciones
• Su dispositivo / emulador se mostrará junto con cualquier otro dispositivo reconocido que esté conectado a su computadora, y debajo de su dispositivo habrá detalles del 'WebView' de Cordova (básicamente su aplicación Cordova), que se ejecuta en el dispositivo / emulador ( la forma en que funciona Cordova es que básicamente crea una ventana de 'navegador' en su dispositivo / emulador, dentro de la cual hay un 'WebView' que es su aplicación HTML / JavaScript en ejecución)
• Haga clic en el enlace 'inspeccionar' debajo de la sección 'WebView' donde verá su dispositivo / emulador en la lista. Esto muestra las herramientas de desarrollador 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 está ejecutando actualmente. Puede agregar puntos de interrupción en JavaScript que le permitan 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 mensaje '>'. Aquí puede escribir cualquier variable u objeto (por ejemplo, objetos DOM) del que desee inspeccionar el valor actual, y se mostrará el valor.

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

Primero, 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">

Luego agregue lo siguiente

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

A mí me funciona 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 de USB en su teléfono y luego visite chrome: // inspect.

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

Usar el monitor de dispositivo Android

Android Device Monitor incluye paquetes con Android SDK que habría 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. Para ejecutar esto, vaya a herramientas / carpeta dentro de su sdk de Android "/ var / android-sdk-linux / tools". Luego ejecuta 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 dispositivos Android que no son visibles. Asegúrese de crear filtros con el signo "+" en la pestaña logcat, para que pueda ver los mensajes solo para su aplicación.

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

También puede depurar con Chrome sus 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

Puede depurar las 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 de forma remota en la aplicación web como si estuviera viendo la aplicación web desde su computadora) con "Chrome Remote Debugging". También puede depurar la aplicación web vista en el navegador Android Stock o Chrome en Android de esta manera.

1. 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).

2. Conecte su computadora con su teléfono a través del cable USB.

3. 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 -> Personalizar y controlar DevTools (3 puntos verticales - esquina superior derecha de las herramientas del desarrollador) -> Más herramientas -> Dispositivos remotos -> en Dispositivos en el lado izquierdo, haga clic en su dispositivo al que está conectado a través de USB -> haga clic en el botón Inspeccionar para la aplicación que desee.

4. Luego 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 desarrollador de Chrome.

¡Me ha encantado Weinre! Cómo usarlo:

Primero, póngase su index.html(asegúrese de que app.settings.debugUrlesté 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>

Luego:

• Instalar en pc: sudo npm install -g weinre
• correr: weinre --boundHost -all-
• abrir en el navegador: http: // localhost: 8080 / client / # anonymous
• mire los objetivos que aparecen al abrir la aplicación

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

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