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.html
fichier 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?
Réponses:
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/#devices
dans 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.
la source
adb start-server
.chrome://inspect
.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 ;)
la source
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).
la source
chrome://inspect
et assurez-vous que "Découvrir les périphériques USB" est coché. Cela affichera toutes les vues Web déboguables dans les appareils connectés.console.log
cela ne semble pas fonctionner. Vous devez passer paralerts
ce qui est vraiment un fardeau.(it's turned off in --release builds).
cet avis a sauvé ma journée!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
la source
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/
la source
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.
la source
Une autre option est Visual Studio, qui prend en charge les versions préliminaires pour le débogage des applications Cordova :
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 .
la source
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.
la source
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.
la source
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
la source
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?
la source
Sur Android 4.4+ avec SDK installé:
la source
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é:
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.
la source
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"
Puis ajoutez ce qui suit
Cela fonctionne pour moi sur Nexus 5, Phonegap 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/
la source
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
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/
la source
monitor
.Vous pouvez également déboguer avec chrome vos applications html5
Je crée un .bat pour ouvrir Chrome en mode débogage
la source
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.
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).
Connectez votre ordinateur à votre téléphone via un câble USB.
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.
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.
la source
J'ai adoré weinre! Comment l'utiliser:
Tout d'abord, mettez votre
index.html
(assurezapp.settings.debugUrl
- vous qu'il est défini avant cela):Ensuite:
sudo npm install -g weinre
weinre --boundHost -all-
Basé sur http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/
la source
Les appareils avec Android <= 4.0.4 doivent ajouter le plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt
la source