Existe-t-il une vraie solution pour déboguer les applications cordova [fermé]

J'ai passé les deux derniers jours à essayer de comprendre comment déboguer une application HTML5 que j'ai créée à l'aide de Cordova 3.2 et déployée sur un appareil Android 2.3. Tous les articles / articles que j'ai vus fournissent des hacks plutôt que de vraies solutions: (et la plupart du temps, aucun d'entre eux ne fonctionne pour mon cas; déboguez les styles css et le code Angularjs dans mon application.

Jusqu'à présent, j'ai testé;

debug.phonegap.com

J'ai injecté le script dans le index.htmlfichier puis j'ai visité l'URL générée dans debug.phonegap.com mais rien ne se passe; seulement une page vierge.

Weinre

La plupart des articles que j'ai trouvés pointent vers un référentiel Github obsolète qui contient un fichier Jar .. mais il n'est pas trouvé :(

Inspection des bords

Il fonctionne et affiche la page Web que je navigue sur le PC à l'intérieur du mobile. Mais le problème est qu'il utilise un autre navigateur intégré (ou émulateur) que celui qui exécute les applications phonegap; donc les résultats ne sont pas précis.

Émulateur Chrome

Identique à Edge inspect; il ne permet pas de voir le vrai web-kit v530 livré avec Android 2.3.

La solution de rêve

La solution parfaite serait une extension de Google Chrome (bureau) qui vous permet de basculer le navigateur de bureau sur le même que celui des plates-formes Android 2.3; pas d'émulation pas de hacks, juste le navigateur lui-même avec le web-kit v 530.

Malheureusement, une telle solution n'existe pas: (ou je me trompe?

Aucune suggestion?

POUR ANDROID:

Il vous suffit d'activer le «débogueur à distance USB» sur votre appareil Android et de le brancher avec un câble USB. Ensuite, ouvrez votre application dans l'appareil. Chrome détectera le navigateur distant et vous pourrez voir la console de la même manière que vous la voyez lorsque vous utilisez Chrome localement.

Utilisez ce lien: chrome://inspect/#devicesdans le navigateur Chrome (vous devrez le coller dans la barre de navigation).

Si votre application plante dans l'appareil, il vous suffit de voir le journal de la console dans votre navigateur et de voir ce qui se passe. Vous pouvez également ajouter des fonctionnalités, modifier des variables et remplacer des fonctions de la même manière que nous le faisons avec notre navigateur local.

Lisez cet article pour plus d'informations sur les étapes à suivre.

Cela fonctionnera UNIQUEMENT avec les appareils exécutant Android 4.4+.

POUR iOS:

Utilisez Safari pour iOS, procédez comme suit:

1.Dans votre appareil iOS, accédez à Paramètres> Safari> Avancé> Inspecteur Web pour activer l'inspecteur Web

2.Ouvrez Safari sur votre appareil iOS.

3.Connectez-le à votre ordinateur via USB.

4.Ouvrez Safari sur votre ordinateur.

Dans le menu de Safari, accédez à Développer et recherchez le nom de votre appareil.

6.Sélectionnez l'onglet que vous souhaitez déboguer.

REMARQUER

Cette réponse est ancienne (janvier 2014) de nombreuses nouvelles solutions de débogage sont disponibles depuis lors.

Je l'ai enfin fait fonctionner! en utilisant weinre et cordova (pas de build Phonegap) et pour éviter les tracas des futurs développeurs, qui pourraient rencontrer le même problème, j'ai fait un tutoriel YouTube ;)

Si vous pouvez utiliser un appareil Android 4.4+, vous pouvez utiliser le débogage à distance Chrome même sur la WebView interne de l'application. C'est un débogueur bien meilleur que Weinre, mais la clé utilise la version récente d'Android.

Les versions récentes de Cordova activent automatiquement ce type de débogage tant qu'il s'agit d'une version de débogage (elle est désactivée dans les versions --release).

Le mieux pour moi est de joindre le débogueur Chrome.

Pour ce faire, exécutez votre application dans un émulateur ou un appareil (en utilisant l'émulation $ cordova)

puis, ouvrez Google Chrome et accédez à chrome://inspect/

Vous verrez une liste d'applications en cours d'exécution. Votre application devrait être là. Cliquez sur "inspecter".

Une nouvelle fenêtre s'ouvrira avec les outils de développement. Là, vous pouvez cliquer sur "console" pour vérifier les erreurs

Si votre application exécute Cordova 3.3+ et que votre appareil exécute Android 4.4+, vous pouvez utiliser le débogage Chrome Remote Webview. pour déboguer votre application Cordova.

Pour pouvoir le faire, vous devez d'abord activer le débogage USB sur votre téléphone.

Ouvrez ensuite l'onglet «inspecter les périphériques». Dans Chrome, accédez à Paramètres > Plus d'outils > Inspecter les appareils .

Si vous lancez votre application sur votre appareil alors qu'il est connecté à votre ordinateur, la vue Web devrait apparaître dans la liste des appareils. Cliquez sur le lien «Inspecter» de votre Webview et un outil de débogage pour votre Webview devrait apparaître.

Voici un article expliquant en détail comment le faire: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

Avez-vous essayé 'GapDebug' ? C'est gratuit.

Il semble intégrer des versions de Safari Webkit Inspector et Chrome Dev Tools pour offrir une expérience de débogage intégrée sur OS X et Windows.

Une autre option est Visual Studio, qui prend en charge les versions préliminaires pour le débogage des applications Cordova :

Expérience de débogage unifiée . Le développement multiplateforme nécessite souvent un outil différent pour le débogage de chaque appareil, émulateur ou simulateur. Différents outils signifient des flux de travail différents et une perte de productivité chaque fois que vous changez d'appareil. Avec Visual Studio, vous pouvez utiliser les mêmes outils de débogage de classe mondiale pour toutes les cibles de déploiement, y compris Windows, l'émulateur Android, les appareils Android connectés, les appareils et émulateurs iOS et l'émulateur Apache Ripple.

Maintenant que Microsoft a publié l' édition communautaire de Visual Studio gratuitement , vous pouvez l'essayer sans frais. Vous devrez télécharger à la fois Visual Studio et Visual Studio Tools pour Apache Cordova .

Pour autant que je sache, le seul outil productif pour un vrai débogage dans les applications Cordova pour les plates-formes Android de 2.2 à 4.3 est jshybugger . Weinre est un inspecteur, pas un débogueur. JsHybugger instruments votre code vous permettant de déboguer à l'intérieur de l'Android WebView.

Je veux juste ajouter que vous pouvez déboguer des applications Android à l'aide de Genymotion . C'est BIEN plus rapide que l'émulateur Android d'origine.

Vous pouvez utiliser Intel XDK IDE pour développer et déboguer sur un émulateur ou sur un appareil réel

J'ai également trouvé les outils Visual Studio 2015 RC pour cordova très bons, avec son émulateur d'ondulation

Si vous utilisez phonegap build, il existe une option pour activer le débogage.

Pour les versions locales, vous pouvez installer weinre avec npm: https://npmjs.org/package/weinre

Et le lien vers la documentation weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/

Et il y a quelque chose qui s'appelle le débogage à distance Chrome mais je ne sais pas grand chose à ce sujet, vous pouvez consulter l'article de Raymond Camden: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-et-débogage-à-distance-pour-Android

Docs pour le débogage à distance Chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (si j'ai bien compris, vous avez besoin d'un appareil Android avec Chrome comme navigateur par défaut) Peut-être le plus proche de votre rêve Solution?

Sur Android 4.4+ avec SDK installé:

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

Si vous utilisez Cordova 3.3 ou supérieur et que votre appareil exécute Android 4.4 ou supérieur, vous pouvez utiliser le «Débogage à distance sur Android avec Chrome». Les instructions complètes sont ici:

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

En résumé:

• Branchez l'appareil sur votre ordinateur de bureau à l'aide d'un câble USB
• Activez le débogage USB sur votre appareil (sur mon appareil, c'est sous Paramètres> Plus> Options du développeur> Débogage USB)

Ou , si vous utilisez Cordova 3.3+ et que vous n'avez pas d'appareil physique avec 4.4, vous pouvez utiliser un émulateur qui utilise Android 4.4+ pour exécuter l'application via l'émulateur, sur votre ordinateur de bureau.

• Exécutez votre application Cordova sur l'appareil ou l'émulateur
• Dans Chrome sur votre ordinateur de bureau, saisissez chrome: // inspect / # devices dans la barre d'adresse
• Votre appareil / émulateur sera affiché avec tous les autres appareils reconnus connectés à votre ordinateur, et sous votre appareil, il y aura des détails sur Cordova 'WebView' (essentiellement votre application Cordova), qui s'exécute sur l'appareil / l'émulateur ( le fonctionnement de Cordova est qu'il crée essentiellement une fenêtre de `` navigateur '' sur votre appareil / émulateur, dans laquelle se trouve une `` WebView '' qui est votre application HTML / JavaScript en cours d'exécution)
• Cliquez sur le lien «inspecter» sous la section «WebView» où vous voyez votre appareil / émulateur répertorié. Cela fait apparaître les outils de développement Chrome qui vous permettent désormais de déboguer votre application.
• Sélectionnez l'onglet "sources" des outils de développement Chrome pour afficher le JavaScript que votre application Cordova sur l'appareil / l'émulateur est en cours d'exécution. Vous pouvez ajouter des points d'arrêt dans le JavaScript qui vous permettent de déboguer votre code.
• En outre, vous pouvez utiliser l'onglet «console» pour afficher les erreurs (qui seront affichées en rouge), ou au bas de la console, vous verrez une invite «>». Ici, vous pouvez saisir toutes les variables ou objets (par exemple les objets DOM) dont vous souhaitez inspecter la valeur actuelle, et la valeur sera affichée.

Voici la solution utilisant Phonegap Build. Ajoutez ce qui suit à votre config.xml pour pouvoir inspecter avec le débogage de la vue Web à distance Chrome.

Tout d'abord, assurez-vous que votre balise widget contient 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">

Puis ajoutez ce qui suit

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

Cela fonctionne pour moi sur Nexus 5, Phonegap 3.7.0.

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

Créez l'application dans Phonegap Build, installez l'APK, connectez le téléphone à l'USB, activez le débogage USB sur votre téléphone, puis visitez chrome: // inspect.

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

Utiliser le moniteur de périphérique Android

Android Device Monitor est livré avec des packages avec Android SDK que vous auriez déjà installés. Dans le moniteur de périphérique, vous pouvez voir tout le journal de votre périphérique, les exceptions, les messages. Ceci est utile pour déboguer les plantages d'applications ou tout autre problème de ce type. Pour l'exécuter, allez dans le dossier tools / de votre sdk android «/ var / android-sdk-linux / tools». Puis exécutez ce qui suit

chmod +x monitor
./monitor

Si vous êtes sous Windows, ouvrez directement le fichier monitor.exe. Il y a un onglet sous «LogCat» où vous verrez tous les messages relatifs à l'appareil. Vous verrez tous les messages ici, y compris les exceptions d'appareils Android qui ne sont pas visibles sur l'appareil Chrome inspect. Assurez-vous de créer des filtres à l'aide de l'onglet Logcat de connexion «+», afin de ne voir les messages que pour votre application.

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

Vous pouvez également déboguer avec chrome vos applications html5

Je crée un .bat pour ouvrir Chrome en mode débogage

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

Vous pouvez déboguer les applications Android Cordova qui sont installées sur votre téléphone à distance depuis votre ordinateur via le câble USB (vous pouvez également cliquer à distance sur l'application Web comme si vous visualisiez l'application Web depuis votre ordinateur) avec "Chrome Remote Debugging". Vous pouvez également déboguer l'application Web affichée dans le navigateur Stock Android ou Chrome sur Android de cette façon.

1. Activez le mode développeur sur votre appareil Android (accédez aux paramètres -> à propos du téléphone -> appuyez sur 7x sur le numéro de version).

2. Connectez votre ordinateur à votre téléphone via un câble USB.

3. Déjeunez Chrome sur votre ordinateur et accédez à chrome: // inspectez et cliquez sur le bouton «Inspecter» à côté de l'appareil distant que vous souhaitez déboguer (sous l'onglet «Appareils»). OU faites un clic droit à l'intérieur de Chrome sur votre ordinateur -> Inspecter -> Personnaliser et contrôler DevTools (3 points verticaux - coin supérieur droit des outils de développement) -> Plus d'outils -> Périphériques distants -> sous Périphériques sur le côté gauche, cliquez sur votre appareil auquel vous êtes connecté via USB -> cliquez sur le bouton Inspecter de l'application souhaitée.

4. Cliquez ensuite sur "Console" et vous pourrez déboguer JavaScript de la même manière que vous le feriez sur une application Web normale avec les outils de développement Chrome.

J'ai adoré weinre! Comment l'utiliser:

Tout d'abord, mettez votre index.html(assurez app.settings.debugUrl- vous qu'il est défini avant cela):

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

Ensuite:

• installer: sudo npm install -g weinre
• courir: weinre --boundHost -all-
• ouvrir sur le navigateur: http: // localhost: 8080 / client / # anonymous
• les cibles de la montre s'affichent lorsque vous ouvrez l'application

Basé sur http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

Les appareils avec Android <= 4.0.4 doivent ajouter le plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt