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

130

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?

numediaweb
la source

Réponses:

139

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.

entrez la description de l'image ici

Néotrix
la source
3
Je peux voir la console et mon application dans Chrome sur mon ordinateur, tandis que mon smartphone est connecté via USB. Solution très cool.
emilie zawadzki
Il n'a trouvé mon téléphone que lorsque j'ai couru adb start-server.
Leukipp
@Leukipp Je suis également confronté au même problème, mais après cela, ajoutez ADT au démarrage de mon système Windows. mon problème à résoudre ..
Neotrixs
2
La réponse présente une solution au mauvais problème - la question n'est pas de déboguer un navigateur, mais de déboguer une WebView. Celles-ci sont légèrement différentes, comme en témoigne une multitude d'utilisateurs frustrés confus car leurs WebViews où leurs applications sont affichées ne s'affichent pas chrome://inspect.
amn le
1
Android 4.4+: (C'est la raison ...
candlejack
76

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

numediaweb
la source
Il me manquait la configuration IP appropriée, maintenant cela fonctionne parfaitement, merci beaucoup!
Juan Carlos Alpizar Chinchilla
8
Weinre n'est pas un débogueur, il permet uniquement les inspections DOM, vous ne pouvez pas déboguer js et même regarder les messages de la console
Bogdan Mart
19
... en quoi un lien vers une vidéo YouTube est-il une réponse acceptable?
Meekohi
2
@Meekohi il a fait la vidéo :)
candlejack
10
Comme pour toutes les réponses stackoverflow - un lien vers une solution (qu'il soit créé par l'auteur ou non) est mal vu. Gardez les solutions ici, et non à l'extérieur là où elles pourraient être allées un jour.
DarkNeuron
56

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

rdchambers
la source
Ça a l'air génial - également remarqué qu'il existe un plugin de construction phonegap disponible pour activer cette fonctionnalité.
DavidC
1
Selon votre commentaire: il est désactivé dans --release builds (Ce n'est pas vrai)
Luckyy
9
Ré. ceci, j'ai trouvé ce lien utile. De manière appropriée, utilisez Chrome pour naviguer chrome://inspectet 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.
Sharadh
le problème avec cette solution est que console.logcela ne semble pas fonctionner. Vous devez passer par alertsce qui est vraiment un fardeau.
João Pimentel Ferreira
(it's turned off in --release builds).cet avis a sauvé ma journée!
maswerdna
32

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

José
la source
7
Veuillez vérifier que votre réponse fonctionnera dans les conditions d'OP. Le débogueur Chrome ne fonctionne qu'avec Android 4.4+.
Chris Neve
20

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/

Mitch
la source
C'est l'une des réponses les meilleures et les plus complètes de cette section de commentaires, même si cela n'aide pas OP à cause de 4.4+.
Chris Neve
7

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.

Zaxxo
la source
1
Il s'agit d'un outil essentiel, en particulier pour les utilisateurs Windows souhaitant se connecter à l'étape de débogage de l'iPhone - je le recommande vivement.
mike nelson
7

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 .

Josh
la source
Depuis que le XDK d'Intel, autrefois incroyable, a cessé de prendre en charge son débogueur, j'ai dû chercher une nouvelle option. Visual Studio est le seul que j'ai trouvé qui soit une solution tout-en-un (IDE, débogueur, gestionnaire de plugins, etc.). La configuration prend du temps mais c'est très simple. J'utilise Enterprise 2015. Il construit mais je ne suis pas sûr qu'il publie encore (je n'ai pas encore atteint ce point).
Victor Stoddard
5

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.

sgimeno
la source
5

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.

Victor P
la source
1
Genymotion permet d'utiliser le débogage à distance Chrome car il n'est pas traité comme un émulateur mais comme un appareil réel. L'appareil photo et d'autres fonctionnalités matérielles fonctionnent également, mais certaines d'entre elles sont payantes.
shirk3y
4

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

Mohamed Selim
la source
3

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?

Solution rapide
la source
Merci pour les infos; Je préfère utiliser la méthode cordova gratuite;) et je l'ai fait fonctionner maintenant (vérifiez ma réponse) merci! +1
numediaweb
1
vérifiez ma modification, il semble que chrome n'est pas loin de la solution de vos rêves après tout
QuickFix
Notez que l'appareil que j'utilise exécute Android 2.3 tandis que le débogage à distance Chrome nécessite Android 4.4 ou supérieur. Mais merci "QuickFix"; J'ai tout fonctionne maintenant .. voir mon tutoriel;)
numediaweb
3

Sur Android 4.4+ avec SDK installé:

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

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

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/

brunettdan
la source
SAINT BEJEEZUS !!! Je peux ENFIN déboguer mes apk !!! Merci beaucoup, je ne sais pas pourquoi ce n'est nulle part ailleurs plus important. Inclure ces notes textuellement dans le readme de mon projet.
Josh
2

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/

Faraz Kelhini
la source
Pour les utilisateurs Linux, en fonction de votre méthode d'installation du SDK, il peut également être trouvé dans ~ / Android / Sdk / tools / monitor ou essayez simplement de taper monitor.
Strixy
2

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
dpfauwadel
la source
1
Merci, mais j'ai trouvé que la meilleure approche est d'utiliser weinre pour déboguer la conception avec le navigateur Webkit intégré de l'appareil lui-même!
numediaweb
1
Je soutiens que, alors que ripple vous donne une idée moyenne de son apparence lorsque vous le publiez, ce qui est bien, il existe parfois des différences entre l'émulateur et le périphérique réel, principalement parce que l'émulateur fonctionne avec le moteur du navigateur Web que vous utilisez. re en cours d'exécution, ce qui n'est pas la même chose dans certaines situations, car votre appareil fonctionnera. Donc, j'utilise généralement les deux, ondulation pour concevoir l'interface utilisateur, et nous testons le comportement lorsque quelque chose ne fonctionne pas comme prévu
Juan Carlos Alpizar Chinchilla
2

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.

Tadej
la source
Cela fonctionne sur mon téléphone (android 6) mais ne fonctionne pas sur ma tablette (note 8 android 4.4)
Danielo515
C'était un problème avec la vue Web Android. L'installation du plugin Crosswalk me permet de faire ce genre de débogage sur des appareils plus anciens (jusqu'à
Jelly
1

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:

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

brauliobo
la source
Weinre n'est pas un débogueur, il ne permet que les inspections DOM, vous ne pouvez pas déboguer js et même regarder les messages de la console,
Bogdan Mart