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

130

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?

numediaweb
fuente

Respuestas:

139

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.

ingrese la descripción de la imagen aquí

Neotrixs
fuente
3
Puedo ver la consola y mi aplicación en Chrome en mi computadora, mientras mi teléfono inteligente está conectado a través de USB. Muy buena solución.
emilie zawadzki
No encontró mi teléfono hasta que corrí adb start-server.
Leukipp
@Leukipp También tengo el mismo problema, pero luego agrego ADT en el inicio de mi sistema Windows mi problema resuelve ..
Neotrixs
2
La respuesta presenta la solución al problema incorrecto: la pregunta no se trata de depurar un navegador, se trata de depurar un WebView. Estos son ligeramente diferentes, como lo demuestra una multitud de usuarios frustrados confundidos porque sus WebViews donde se muestran sus aplicaciones no se muestran en chrome://inspect.
amn
1
Android 4.4+ :( Esa es la razón ...
candlejack
76

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

numediaweb
fuente
Me faltaba la configuración adecuada de IP, ahora funciona perfectamente, ¡muchas gracias!
Juan Carlos Alpizar Chinchilla
8
Weinre no es depurador, solo permite inspecciones DOM, no puede depurar js e incluso ver mensajes de la consola
Bogdan Mart
19
... ¿Cómo es un enlace a un video de YouTube una respuesta aceptable?
Meekohi
2
@Meekohi hizo el video :)
candlejack
10
Como con todas las respuestas de stackoverflow, un enlace a una solución (ya sea hecho por el autor o no) está mal visto. Mantenga las soluciones aquí, y no externamente, donde podrían desaparecer algún día.
DarkNeuron
56

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

rdchambers
fuente
Se ve genial: también noté que hay un complemento de compilación de phonegap disponible para habilitar esta función.
DavidC
1
Según su comentario: está desactivado en las versiones de lanzamiento (eso no es cierto)
Luckyy
9
Re. esto, encontré este enlace útil. Pertinentemente, use Chrome para navegar chrome://inspecty asegurarse de que "Descubrir dispositivos USB" esté marcado. Esto mostrará cualquier WebView depurable en dispositivos conectados.
Sharadh
El problema con esta solución es que console.logno parece funcionar. Tienes que pasar, lo alertscual es realmente una carga.
João Pimentel Ferreira
(it's turned off in --release builds).¡Este aviso me salvó el día!
maswerdna
32

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

José
fuente
77
Verifique que su respuesta funcione en las condiciones de OP. El depurador de Chrome solo funciona con Android 4.4+.
Chris Neve
20

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/

Mitch
fuente
Esta es una de las mejores y más completas respuestas de esta sección de comentarios, aunque no ayuda a OP debido a 4.4+.
Chris Neve
7

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

Zaxxo
fuente
1
Esta es una herramienta esencial, especialmente para los usuarios de Windows que desean conectarse al iPhone de depuración por pasos. Lo recomiendo encarecidamente.
Mike Nelson
7

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 .

Josh
fuente
Dado que el XDK de Intel, una vez sorprendente, dejó de ser compatible con su depurador, tuve que buscar una nueva opción. Visual Studio es el único que he encontrado que es una solución todo en uno (IDE, depurador, administrador de complementos, etc.). La configuración lleva un tiempo, pero es muy simple. Yo uso Enterprise 2015. Se construye pero no estoy seguro si se publica aún (no he llegado a ese punto).
Victor Stoddard
5

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.

sgimeno
fuente
5

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

Victor P
fuente
1
Genymotion permite utilizar la depuración remota de Chrome, ya que no se trata como un emulador sino como un dispositivo real. La cámara y otras funciones de hardware también funcionan, pero algunas de ellas son de pago.
shirk3y
4

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

Mohamed Selim
fuente
3

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?

Arreglo rapido
fuente
Gracias por la información; Prefiero usar la forma gratuita de cordova;) y lo tengo funcionando ahora (verifique mi respuesta) ¡gracias! +1
numediaweb
1
revisa mi edición, parece que Chrome no está lejos de la solución de tus sueños después de todo
QuickFix
Tenga en cuenta que el dispositivo que estoy usando ejecuta Android 2.3, mientras que la depuración remota de Chrome requiere Android 4.4 o superior. Pero gracias "QuickFix"; Ya tengo todo funcionando ... mira mi tutorial;)
numediaweb
3

En Android 4.4+ con SDK instalado:

adb logcat chromium:D SystemWebViewClient:D \*:S
Gringo Suave
fuente
2

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.
Chris Halcrow
fuente
2

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/

Brunettdan
fuente
¡SANTA BEJEEZUS! ¡Finalmente puedo depurar mis apk's! Muchas gracias, no sé por qué esto no es más prominente. Incluyendo estas notas textualmente en el archivo Léame de mi proyecto.
Josh
2

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/

Faraz Kelhini
fuente
Para los usuarios de Linux, dependiendo de su método de instalación de SDK, también se puede encontrar en ~ / Android / Sdk / tools / monitor o simplemente intente escribir monitor.
Strixy
2

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
dpfauwadel
fuente
1
Gracias, pero encontré que el mejor enfoque es usar weinre para depurar el diseño con el navegador webkit integrado del dispositivo.
numediaweb
1
Lo secundo, mientras que ripple le da una idea promedio de cómo se verá cuando lo suelte, lo cual es bueno, a veces hay diferencias en la comparación del emulador y el dispositivo real, principalmente porque el emulador funciona con el motor del navegador web ' vuelva a ejecutarlo, lo que no es lo mismo en algunas situaciones ya que su dispositivo funcionará. Por lo general, utilizo ambos, ondulación para diseñar la interfaz de usuario, y estamos para probar el comportamiento cuando algo no funciona como se esperaba
Juan Carlos Alpizar Chinchilla
2

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.

Tadej
fuente
Esto funciona en mi teléfono (android 6) pero no funciona en mi tableta (nota 8 android 4.4)
Danielo515
Fue un problema con la vista web de Android. La instalación del plugin crosswalk me permite realizar este tipo de depuración en dispositivos más antiguos (hasta
Jelly
1

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

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

brauliobo
fuente
Weinre no es depurador, solo permite inspecciones DOM, no puede depurar js e incluso ver mensajes de la consola,
Bogdan Mart