web-dev-qa-db-fra.com

debug javascript in Android emulator with phonegap

Je suis nouveau sur Phonegap et Android. Puis-je savoir comment puis-je déboguer l'erreur javascript sur l'émulateur? J'ai entendu parler d'ADB puis-je savoir comment l'utiliser et l'installer sur le système Windows 7 "J'ai un ajax appelé avec jsonp mais pas de réponse sur l'émulateur. Cependant, je peux appeler cet ajax avec le navigateur sur Windows. Puis-je savoir ce qui ne va pas?

javascriptandroidandroid-emulatorcordova
68
davidlee

Vous pouvez au moins enregistrer des éléments de débogage dans la console adb en appelant console.log () en JavaScript. Peut-être que cela suffirait?

Pour afficher la sortie du journal à l'aide d'adb, accédez à votre répertoire SDK platform-tools/et exécutez:

adb logcat

Voir outil de ligne de commande logcat

41
Stefan H Singer

Mise à jour de novembre 2016: semble que cela ne fonctionne plus.

Le plus simple et l'un des moyens les plus puissants utilise http://debug.phonegap.com (il utilise Weinre dans l'arrière-plan, si vous vous souciez). Vous juste

  1. choisissez une chaîne aléatoire, dites r4nd0m,
  2. injecter <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script> Dans votre index.html
  3. visite http://debug.phonegap.com/client/#r4nd0m et vous déboguez instantanément votre application Web mobile.

Choses que vous pouvez faire (similaire à Firebug ou Web Inspector):

  1. Affichage et modification du DOM
  2. Modification de CSS
  3. Console pour le débogage en direct et l'exécution de Javascript à distance.
  4. Autres choses, comme: stockage, ressources, chronologie, profil, etc.
43
duality_

Vous pouvez maintenant utiliser Chrome outils de développement pour déboguer à distance Android applications Phonegap! J'ai écrit des instructions ici: Débogage à distance des applications Phonegap avec Chrome Dev Tools

Étapes pour Android:

  1. Accédez à Chrome: // inspecter/dans Google Chrome sur votre ordinateur de bureau.
  2. Localisez Android sur l'onglet Appareils et cliquez sur le lien 'inspecter'

Google Chrome remote target

Voir aussi Premiers pas avec le débogage à distance Android Appareils

22
jackocnr

Je recommanderais jsconsole . Il vous permet d'injecter n'importe quel JavaScript dans la page et fournit une console de base. Il y a un joli tutoriel sur débogage à distance .

4
dave1010

J'ai constaté que cela fonctionne pour le débogage des erreurs javascript pour Android/Phonegap lors du test de l'application via Eclipse sur Windows 7.

Allez simplement dans Fenêtre> Afficher la vue> Autre ...

Sélectionnez ensuite LogCat sous le dossier Android.

La fenêtre/l'onglet qui vient d'apparaître est l'endroit où l'émulateur Android enverra ses journaux et messages d'erreur. Vous pouvez détacher cette fenêtre et la placer en dehors d'Eclipse IDE (j'ai trouvé cela utile). Vous pouvez également contrôler les types d'erreurs que vous voyez en sélectionnant l'une des 5 lettres colorées dans le coin supérieur droit de la fenêtre.

Pour masquer les informations inutiles afin de ne voir que les erreurs, assurez-vous que vous n'avez sélectionné que (E). Personnellement, j'aime également que les avertissements (W) soient sélectionnés ainsi que les erreurs (E).

J'espère que ça t'as aidé!

2
abassi

Oui, vous avez des erreurs de journal avec console.log et affichez l'onglet LogCat dans Eclipse. Là, les messages de la console Web (y compris les erreurs JS) s'affichent. C'est un peu verbeux, vous devez donc filtrer pour afficher uniquement les balises de la console Web, mais cela fonctionne bien. Décrit ici: AFFICHAGE DE LA CONSOLE CONSOLE.LOG SORTIE ET ​​DES ERREURS JAVASCRIPT AVEC PHONEGAP SUR Android/Eclipse

2
ferik

Il y a (enfin) un outil disponible pour permettre un débogage JavaScript correct pour Android - http://www.jshybugger.org/

Fonctionnalités:

  • ajouter/supprimer/activer/désactiver les points d'arrêt de ligne
  • expressions de montre
  • entrer/sortir/sortir
  • pause sur exception
  • navigation dans la pile d'appels
  • inspection variable locale
  • console à distance
  • syntaxe javascript et rapport d'erreurs d'exécution
  • afficher/modifier/supprimer des éléments de stockage local
  • afficher/modifier/supprimer des éléments de stockage de session
  • afficher/modifier/supprimer les enregistrements de la base de données WebSQL (regarder la vidéo)
  • afficher les ressources de la page (images, scripts, html)
  • prise en charge de la console distante améliorée (stacktrace)
  • Débogueur: inspection améliorée des objets
  • Débogueur: points d'arrêt conditionnels
  • Débogueur: continuez ici
2
William Pownall

Je l'ai résolu facilement en deux étapes.

Modifier le niveau de journalisation

Dans config.xml ajoutez cette ligne

    <log level="DEBUG"/>

Exécutez le journal cordova

Il s'agit d'un fichier de chauve-souris que vous pouvez simplement exécuter et suivre tous les messages du journal, accédez à votre projet phonegap et accédez à \platforms\Android\cordova puis ouvrez log.bat vous pouvez maintenant émuler votre application en utilisant la ligne de commande

cordova emulate

et le journal sera affiché dans le cmd qui apparaîtra lorsque vous ouvrirez log.bat

2
shady sherif

La meilleure solution pour intercepter les exceptions et les afficher dans votre console est ce code:

window.onerror = function(msg, uri, line) {
    console.log(msg + uri + line);
}
0
Rodrigo Dias

Le débogage de l'application PhoneGap/Apache Cordova est facile avec GapDebug

  • Téléchargez et installez GapDebug depuis https://www.genuitec.com/products/gapdebug/

  • Exécutez un GapDebug sur votre PC/Mac

  • Activez l'option développeur et le débogage USB sur votre Android (Paramètres -> Option développeur (ON) -> Débogage USB (ON))

  • Si l'option Développeur n'est pas trouvée (Paramètres -> À propos du téléphone -> Cliquez 7 fois sur le numéro de build)

  • Vous pouvez déboguer votre application depuis votre GapDebug

Référer

0
Priyanka

Si vous êtes prêt à installer NodeJS quelque part, vous pouvez effectuer un débogage étendu avec iBug de John Boxall, qui a été conçu pour l'iPhone sur lequel j'ai testé Android et fonctionne très bien. Il s'agit essentiellement de Firebug Lite pour les appareils mobiles. Je pointe vers ma cause fork Node a beaucoup changé et le code de John ne fonctionnerait pas sur un nodeJS moderne, donc je l'ai corrigé pour l'obtenir opérationnel sur nodeJS 0.2.3, YMMV sur les versions plus récentes de nodeJS.

0
Kris Erickson

Dans Eclipse, vous pouvez ajouter un hook au bouton Android emulator back et inspecter une valeur à la volée. Ajoutez le gestionnaire d'événements onBackPressed et appelez la console javascript à partir de là. Dans la perspective de débogage Eclipse, vous allez modifier la valeur d'une variable String en ce que vous souhaitez inspecter, et la transmettre à votre application en appelant super.loadUrl.

Voir le code ci-dessous. N'oubliez pas d'activer le débogage de votre application depuis la vue DDMS

public class MyActivity extends DroidGap {
    private String js = "";
    @Override
    public void onBackPressed() {  
        //add a breakpoint to the follow line 
        //and change the value for "js" variable before continuing execution
        super.loadUrl("javascript:console.log(" + js + ")");
        return;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("keepRunning", false);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///Android_asset/www/index.html", 20000);
    }
}
0
Bruno Pasquali

Le débogage Phonegap existe toujours. celui que je connais est dans la construction de phonegap trouvée dans les paramètres et cochez l'option d'application de débogage. Il reconstruira ensuite votre application lorsque vous l'enregistrerez. Un bouton de débogage apparaîtra dans la page de l'application avec les options de reconstruction. (ce service utilise également un weinre intégré)

Une autre option que je trouve aussi la plus rapide est jsconsole.com . Son très facile à installer et ne nécessite presque aucune configuration par rapport aux autres méthodes de débogage où vous devez installer beaucoup de choses comme les pilotes et les SDK.

REMARQUE!

Dans PhoneGap 10 lorsque vous créez votre application et que toute demande en dehors de l'application (comme s'il n'y a pas d'Internet) échoue, vous devrez l'ajouter dans votre config.xml

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access Origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

Je tirais mes cheveux en essayant de faire fonctionner n'importe quel outil de débogage à distance uniquement pour découvrir que les demandes extérieures étaient bloquées par défaut. cela m'a sauvé.

0
Gokigooooks

Si tu utilises console.log vous pouvez faire des instructions d'impression simples. En plus d'utiliser adb pour les afficher, vous pouvez utiliser une visionneuse de journaux sur l'appareil et y afficher les journaux. Plus d'informations: http://www.technomancy.org/Android/javascript-debugging/

0
Rory

Si vous utilisez Phonegap Build et que vous souhaitez déboguer à l'aide de la console Chrome, voici une solution de travail. Il est possible de déboguer WebViews à l'aide du débogage USB ( https: // développeur. chrome.com/devtools/docs/remote-debugging#debugging-webviews )

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

Ajoutez ensuite 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/

0
brunettdan