web-dev-qa-db-fra.com

Comment voir les erreurs javascript de l'application PhoneGap dans Xcode?

Je veux déboguer mon application PhoneGap dans Xcode, mais sa console ne peut pas afficher les erreurs javascript.

javascriptiosxcodedebuggingcordova
82
mockee

La façon la plus élégante d'afficher et de déboguer les erreurs JavaScript dans votre application Cordova/PhoneGap consiste à attacher l'inspecteur Web de votre navigateur Safari à la vue Web de votre application iOS (mais, comme Tom Clarkson l'a déjà mentionné, vous aurez besoin d'au moins iOS 6 ).

  • Sur votre iPad ou iPhone, utilisez l'application Paramètres pour activer l'inspecteur Web dans les paramètres avancés de Safari
  • Connectez votre appareil à un Mac via USB (il apparaîtra alors sous le menu Développer de Safari)
  • Démarrez votre application
  • Accédez à la vue Web que vous souhaitez déboguer
  • Sur le Mac, dans le menu Safari Develop, sélectionnez le nom de votre appareil et de l'application (sa page HTML), dans son sous-menu
  • Une fenêtre Web Inspector s'ouvre, vous permettant de parcourir le DOM, de définir des points d'arrêt, etc.

screen dump of Safari Develop menu on OS X

documentation d'Apple sur la configuration

n tutoriel tiers complet

Vous pouvez également connecter l'inspecteur Web de Chrome aux appareils iOS après l'installation de proxy de débogage WebKit iOS . Cela ouvre également la possibilité de faire l'inspection depuis Linux ou Windows.

L'accès à distance au HTML, CSS et JavaScript de votre iOS est devenu encore plus flexible de nos jours car vous pouvez installer RemoteDebug iOS WebKit Adapter au-dessus du proxy de débogage susmentionné. Parce que cet adaptateur traduit le WebKit Remote Debugging Protocol en Chrome Debugging Protocol, ceux-ci (sur toutes leurs plates-formes prises en charge) deviennent disponibles en tant qu'outils de débogage et d'inspection alternatifs:

  • Code Visual Studio
  • Chrome DevTools
  • Débogueur Mozilla

BTW, le débogage à distance avec Safari Web Inspector fonctionne même en combinaison avec le simulateur iOS.

Version minimale de Desktop Safari par version iOS

Pour chaque version d'iOS, vous aurez besoin d'une version minimale spécifique de Desktop Safari pour utiliser l'inspection Web à distance, voir la liste ci-dessous.

iOS 6
Safari 6+
iOS 7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
Safari 9 +/10 +? Commentez s'il vous plaît; essayez toujours Safari Technology Preview
iOS 11
Safari 11+
iOS 12
Safari 12+
82
ᴠɪɴᴄᴇɴᴛ

Collez ce qui suit quelque part près du début de votre document afin qu'il soit exécuté avant l'un de vos autres JavaScript.

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

Et profitez de la visualisation des détails de vos erreurs Javascript dans la fenêtre de la console Xcode.

MISE À JOUR: La technique ci-dessus enregistrera les erreurs telles que les variables non définies. Mais des erreurs de syntaxe telles que des virgules manquantes entraîneront toujours la rupture du script entier sans rien enregistrer.

Par conséquent, vous devez ajouter ce qui suit au début de votre fonction onDeviceReady :

console.log('Javascript OK');

Si vous ne voyez pas "JavaScript OK" apparaître dans votre fenêtre de journal lorsque l'application se lance, cela signifie que vous avez une erreur de syntaxe quelque part.

Pour sauver la chasse aux virgules manquantes, le plus simple est de coller votre code dans un validateur Javascript comme celui-ci:

http://www.javascriptlint.com/online_lint.php

et laissez-le trouver l'erreur pour vous.

Espérons que cela supprime une partie de la douleur du débogage.

46
elMarquis

Notez qu'avec 0.9.2 (publié aujourd'hui), console.log a été normalisé sur toutes les plates-formes pour la journalisation (avec debug.log déconseillé).

Il existe une fonction disponible sur le bureau WebView qui n'est pas exposée dans iOS UIWebView qui détectera toutes les erreurs (j'essaie de pirater cette fonctionnalité dans un plugin, qui utilise des API privées, mais le plugin ne serait que pour le développement ), mais pour l'instant, faites ce que Kris a suggéré ci-dessus et mettez try catch blocks sur le code et utilisez console.log

Pour attraper rapidement les erreurs de syntaxe possibles, lors du développement, j'ai la page chargée dans Safari de bureau et rafraîchissez-la rapidement avec la console d'erreurs webkit visible.

9
Shazron

Pour que le débogage javascript fonctionne dans Xcode, je voudrais jeter un œil à ce qui suit.

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/

En ce qui concerne le dépannage supplémentaire ...
Pour commencer, vous pouvez exécuter l'application en safari sur votre PC et utiliser le débogueur de safari (ou chrome car les deux exécutent des moteurs de rendu similaires). Cela ne frappera pas le erreurs logiques avancées et nombre de vos problèmes d'api, mais cela devrait à tout le moins aider à résoudre de nombreux problèmes (javascript de base, HTML5, etc.).

3
Terrance

debug.log enverra des messages à la console XCode dans Phonegap (vous permettant soit de consigner le résultat d'une exception ou de faire un débogage), cependant, vous avez raison de devoir déboguer d'autres erreurs javascript dans Safari (sur le bureau ou sur l'iphone avec la console de débogage activée). Je n'ai pas encore trouvé une erreur Javascript, qui a été causée par l'exécution sur l'iphone et n'était pas présente lors du débogage avec la console activée dans Safari (bien que je sache qu'il y a quelques différences entre WebView et Safari sur l'iphone).

3
Kris Erickson

Je viens de tomber Weinre

C'est un débogueur javascript distant pour phonegap. Vous pouvez soit configurer votre propre serveur Weinre, soit utiliser celui sur http://debug.phonegap.com/

Cela semble bien fonctionner - très impressionné jusqu'à présent.

3
asgeo1

Si vous utilisez iOS 6, vous pouvez simplement attacher l'inspecteur Web safari (dans le menu de développement de safari de bureau) à votre application et obtenir un débogage javascript complet.

Il y a quelques domaines où c'est un peu limité - erreurs de démarrage et appels de plugin - mais cela fonctionne bien pour à peu près tout le reste.

3
Tom Clarkson

Pour afficher toutes les erreurs dans la console javascript, j'accepte d'utiliser cet écouteur d'événements

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Cependant, à moins que le plugin cordova ne soit installé, il ne s'affichera pas sur la "console" XCodes. Accédez à votre dossier de projet et tapez ceci:

? cordova plugin add cordova-plugin-console

Cela permettra à la commande javascript 'console.log (' une chaîne ') de s'afficher sur XCode.

Notez que vous aurez besoin de git, etc ... mais si vous éditez votre projet phonegap dans xcode, vous l'avez très probablement!

PS Assurez-vous de mettre le plug-in de script cordova.js avant toute utilisation de console.log

<script type="text/javascript" src="/cordova.js"></script>
2
Arvin Amir

Mettez ceci au début de votre index.html

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>
0
Toolkit