Existe-t-il une vraie solution pour déboguer les applications Cordova?
J'ai passé les deux derniers jours à essayer de comprendre comment déboguer une application HTML5 créée à l'aide de Cordova 3.2 et déployée sur un périphérique Android 2.3. Tous les articles/posts 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éboguer les styles css et le code Angularjs dans mon application ..
Jusqu'ici j'ai testé;
debug.phonegap.com
J'ai injecté le script dans le fichier index.html, puis visité l'URL générée dans debug.phonegap.com mais rien ne se passe; seulement une page blanche.
Weinre
La plupart des articles que j'ai trouvés indiquent un référentiel Github obsolète qui contient un fichier Jar .. mais il n'a pas été trouvé :(
Edge inspect
Il fonctionne et affiche la page Web sur laquelle je navigue sur le PC du mobile. Mais le problème est qu’il utilise un autre navigateur intégré (ou émulateur) que celui qui exécute des applications phonegap; alors les résultats ne sont pas précis.
Emulateur Chrome
Identique à Edge inspect; cela ne permet pas de voir le vrai kit web v530 livré avec Android 2.3.
La solution de rêve
La solution idéale serait une extension de Google Chrome (bureau) qui vous permette de basculer le navigateur de votre bureau vers le même navigateur que celui trouvé sur Android 2.3; pas d'émulation pas de piratage, juste le navigateur lui-même avec web-kit v 530.
Malheureusement, une telle solution n'existe pas :( ou je me trompe?
Aucune suggestion?
REMARQUE
Cette réponse est ancienne (janvier 2014), de nombreuses nouvelles solutions de débogage sont disponibles depuis lors.
J'ai enfin réussi à le faire fonctionner! en utilisant weinre et cordova (pas de version de Phonegap) et pour éviter les tracas des futurs développeurs, qui pourraient être confrontés au même problème, j’ai fait un tutoriel YouTube ;)
POUR Android:
Il vous suffit d'activer le "débogueur distant USB" dans votre appareil Android et de le brancher à l'aide d'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 lorsque vous utilisez Chrome localement.
Utilisez ce lien: chrome://inspect/#devices dans le navigateur Chrome (vous devrez le coller dans la barre de navigation).
Si votre application se bloque dans l'appareil, il vous suffit de consulter 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.
Ceci fonctionnera UNIQUEMENT avec les appareils fonctionnant sous Android 4.4 +.
POUR iOS:
Utilisez Safari pour iOS, procédez comme suit:
1.Dans votre appareil iOS, accédez à Paramètres> Safari> Avancé> Web Inspector pour activer Web Inspector.
2.Ouvrez Safari sur votre appareil iOS.
3. Connectez-le à votre ordinateur via USB.
4.Ouvrez Safari sur votre ordinateur.
5.Dans le menu de Safari, allez à Développer et recherchez le nom de votre appareil.
6. Sélectionnez l'onglet que vous souhaitez déboguer.
Si vous pouvez utiliser un appareil Android 4.4+, vous pouvez utiliser Chrome Débogage à distance même sur la WebView interne de l'application. C'est un bien meilleur débogueur que Weinre, mais la clé utilise la version récente Android.
Les versions récentes de Cordova permettent automatiquement ce type de débogage, à condition qu'il s'agisse d'une version de débogage (désactivée dans les versions --release).
Le mieux pour moi est d’attacher le débogueur Chrome.
Pour ce faire, exécutez votre application dans un émulateur ou un périphérique (à l’aide de $ cordova emulate).
puis ouvrez Google Chrome et accédez à chrome://inspect/
Vous verrez une liste avec les 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 fonctionne sous Android 4.4+, vous pouvez utiliser le débogage Webview distant de Chrome pour déboguer. votre application Cordova.
Pour pouvoir le faire, vous devez d'abord activer le débogage USB sur votre téléphone.
Ensuite, ouvrez l'onglet "inspecter les périphériques". Dans Chrome, accédez à Paramètres > Autres outils > Inspectez les appareils .
Si vous lancez votre application sur votre appareil alors qu'il est connecté à votre ordinateur, Webview devrait apparaître dans la liste des appareils. Cliquez sur le lien "Inspecter" de votre vue Web et un outil de débogage pour votre vue Web 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 de ChromeDev Tools pour offrir une expérience de débogage intégrée sur OS X et Windows.
Une autre option est Visual Studio, qui a prise en charge préliminaire du débogage des applications Cordova :
Expérience de débogage unifié . Le développement multiplateforme nécessite souvent un outil différent pour le débogage de chaque périphérique, émulateur ou simulateur. Différents outils signifient différents flux de travail et perte de productivité à chaque changement de périphérique. 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 périphériques attachés Android, les périphériques et émulateurs iOS et Apache. Emulateur d'ondulation.
Maintenant que Microsoft a publié édition gratuite de Visual Studio Community , vous pouvez l'essayer gratuitement. Vous devrez télécharger Visual Studio et Visual Studio Tools pour Apache Cordova .
Je veux juste ajouter que vous pouvez déboguer des applications Android en utilisant Genymotion . C'est beaucoup plus rapide que l'émulateur Android d'origine.
Autant que je sache, le seul outil productif de débogage réel dans les applications Cordova pour les plates-formes Android comprises entre 2.2 et 4.3 est jshybugger . Weinre est un inspecteur, pas un débogueur. JsHybugger instrumente votre code pour vous permettre de déboguer à l'intérieur de Android WebView.
Vous pouvez utiliser Intel XDK IDE pour développer et déboguer sur un émulateur ou sur un périphérique réel.
J'ai également trouvé les outils Visual Studio 2015 RC pour Cordova très bons, avec son émulateur d'ondulations.
Si vous utilisez la version de phonegap, une option permet d'activer le débogage.
Pour les versions locales, vous pouvez installer weinre avec npm: https://npmjs.org/package/weinre
Et le lien vers les documents Weinre: http://people.Apache.org/~pmuellr/weinre/docs/latest/
Et il y a quelque chose qui s'appelle chrome débogage distant, mais je n'en sais pas beaucoup, vous pouvez consulter l'article de Raymond Camden: http://www.raymondcamden.com/index. cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android
Docs pour le débogage distant chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (si j'ai bien compris, vous avez besoin d'un Android appareil avec chrome comme navigateur par défaut) Peut-être la solution la plus proche de vos rêves?
Sur Android 4.4+ avec le SDK installé:
adb logcat chromium:D SystemWebViewClient:D \*:S
Vous pouvez également déboguer avec chrome vos applications html5
Je crée un fichier .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
Voici la solution en utilisant Phonegap Build. Ajoutez les éléments suivants à votre fichier config.xml pour pouvoir inspecter avec Chrome WebView Debugging à distance.
Tout d'abord, assurez-vous que votre balise de 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" />
Construisez 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/
Si vous utilisez Cordova version 3.3 ou supérieure et que votre appareil est sous Android 4.4 ou plus haut , vous pouvez utiliser '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 le périphérique sur votre ordinateur de bureau à l'aide d'un câble USB
- Activer le débogage USB sur votre appareil (sur mon appareil, cela se trouve sous Paramètres> Plus> Options pour les développeurs> Débogage USB)
ou , si vous utilisez Cordova 3.3+ et que vous n'avez pas de périphérique physique avec la version 4.4 , vous pouvez utiliser un émulateur utilisant Android 4.4+ pour exécuter l’application via l’émulateur, sur votre ordinateur de bureau.
- Exécutez votre application Cordova sur le périphérique ou l'émulateur.
- Dans Chrome sur votre ordinateur de bureau, entrez chrome: // inspect/# devices dans la barre d'adresse.
- Votre périphérique/émulateur sera affiché avec tous les autres périphériques reconnus connectés à votre ordinateur. Sous votre périphérique figureront des détails sur Cordova 'WebView' (essentiellement votre application Cordova), qui s'exécute sur le périphérique/émulateur ( Cordova fonctionne de manière à créer une fenêtre "navigateur" sur votre périphérique/é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 périphérique/émulateur répertorié. Ceci ouvre les Chrome outils de développement qui vous permettent maintenant de déboguer votre application.
- Sélectionnez l'onglet "sources" des outils de développement Chrome pour afficher le code JavaScript que votre application Cordova sur le périphérique/émulateur est en cours d'exécution. Vous pouvez ajouter des points d'arrêt dans JavaScript qui vous permettent de déboguer votre code.
- En outre, vous pouvez utiliser l'onglet "console" pour afficher les erreurs éventuelles (qui seront affichées en rouge) ou, au bas de la console, un message ">" s'affiche. Vous pouvez saisir ici toutes les variables ou objets (objets DOM, par exemple) dont vous souhaitez inspecter la valeur actuelle et cette valeur sera affichée.
Vous pouvez déboguer Cordova Android applications 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 consultiez le Web. l’application de votre ordinateur) avec "Chrome Remote Debugging". Vous pouvez également déboguer une application Web affichée dans le navigateur Stock Android ou Chrome sur Android de cette façon.
Activez le mode développeur sur votre appareil Android (accédez à Paramètres -> à propos du téléphone -> tapez 7x sur le numéro de build).
Connectez votre ordinateur avec votre téléphone via un câble USB.
Déjeunez Chrome sur votre ordinateur et accédez à chrome: // inspectez, puis cliquez sur le bouton "Inspecter" situé à côté du périphérique distant que vous souhaitez déboguer (sous l'onglet "Périphériques"). OU clic droit dans Chrome sur votre ordinateur -> Inspecter -> Costumiser et contrôler DevTools (3 points verticaux - coin supérieur droit des outils de développement) -> Autres outils - > Périphériques distants -> sous Périphériques à gauche, cliquez sur votre périphérique auquel vous êtes connecté via USB -> cliquez sur le bouton Inspecter correspondant à l'application souhaitée.
Cliquez ensuite sur "Console" pour déboguer JavaScript de la même manière que sur une application Web normale avec les outils de développement Chrome.
Utilisez Android Moniteur de périphériques
Android Device Monitor est fourni avec des packages avec Android sdk que vous auriez précédemment installés. Dans le moniteur de périphérique, vous pouvez consulter l'intégralité du journal, des exceptions et des messages de votre périphérique. Ceci est utile pour déboguer des plantages d'applications ou tout autre problème de ce type. Pour l'exécuter, accédez au dossier tools/à l'intérieur de votre Android sdk "/ var/Android-sdk-linux/tools". Puis lancez le suivant
chmod +x monitor
./monitor
Si vous êtes sur Windows, ouvrez directement le fichier monitor.exe. Il y a un onglet sous "LogCat" où vous verrez tous les messages liés au périphérique. Vous verrez tous les messages ici, y compris Android exceptions de périphérique non visibles chrome inspect device. Assurez-vous de créer des filtres à l'aide de l'onglet logcat de connexion "+", afin que les messages ne s'affichent que pour votre application.
Source: http://excellencenodejsblog.com/phonegap-debugging-your-Android-application/
J'ai adoré le weinre! Comment l'utiliser:
Commencez par mettre votre index.html (assurez-vous que app.settings.debugUrl 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 - lancer:
weinre --boundHost -all- - ouvrir sur le navigateur: http: // localhost: 8080/client/# anonyme
- regardez les cibles apparaître 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