Quelles sont les méthodes pour déboguer Javascript à l'intérieur d'un UIWebView?


136

J'essaie de comprendre pourquoi quelque chose avec Javascript ne fonctionne pas à l'intérieur d'un UIWebView. À ma connaissance, il n'y a aucun moyen de définir un point d'arrêt à l'intérieur de XCode pour un fichier js. Pas de problème, je vais juste revenir à 2004 et utiliser des statemen d'alerte - oh attendez qu'ils ne semblent pas non plus fonctionner à l'intérieur d'un UIWebView!

La seule chose à laquelle je pourrais penser est en exportant mes fichiers HTML et JS sur mon bureau, puis en effectuant simplement mon débogage à l'intérieur de Safari. Et ça marche! Mais bien sûr, le bogue avec lequel je me bats dans UIWebView ne se produit pas dans Safari.

Existe-t-il d'autres moyens de débogage à l'intérieur d'une UIWebView, ou des astuces que je peux utiliser comme la méthode d'alerte à l'ancienne?

Réponses:


277

Si vous utilisez iOS> = 6 et que vous avez Mountain Lion (10.8) ou Safari> = 6, vous pouvez simplement:

  1. Ouvrez l'application dans le simulateur (ou votre appareil dans XCode> = 4.5.x).
  2. Ouvrez Safari (allez à Preferences -> Advancedet assurez-vous que «Afficher le menu de développement dans la barre de menus» est activé.
  3. Dans la barre de menus (de Safari), sélectionnez Develop -> iPhone Simulator -> [your webview page].

C'est tout !


6
Cela ne fonctionne que si vous exécutez l'application dans un simulateur. Si vous devez utiliser un appareil iOS pour le débogage, consultez cette approche mobiarch.wordpress.com/2013/04/06
...

7
@RajV Vous pouvez déboguer UIWebViews sur un appareil physique, mais seulement ceux que vous mettez directement avec XCode sur votre appareil, pas ceux de l'Appstore.
alecail

1
Assez évident, mais cela peut être utile. J'ai testé cela sur iOS7 Simulator exécutant OSX 10.9 Mavericks et Safari 7 - fonctionnant à merveille. Merci pour cela.
Moe

1
@refaelos Merci !! Son evn fonctionne avec mon appareil physique si j'utilise le profil provisoire de développement.
umang2203

11
Je ne sais pas trop sur le simulateur, mais pour que cela fonctionne sur un appareil, vous devez activer une option dans les paramètres. Settings> Safari> Advanced> Web Inspector<- activer cette
Hodson

31

Cette requête est en tête de Google, il vaut donc la peine de créer un lien vers le remoteInspector caché dans iOS5 - de loin le meilleur moyen trouvé à ce jour pour déboguer votre UIWebViews - il suffit de compiler conditionnellement avant de l'envoyer à Apple.


3
Cela fonctionne toujours, utilisez-le comme ceci: [NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];n'oubliez pas de supprimer l'appel lorsque vous construisez pour la publication!
rpitting le

1
C'est une excellente technique. Cependant, notez que le débogueur semble ne fonctionner qu'en safari. Je l'ai essayé depuis d'autres navigateurs (chrome par exemple) et il n'a montré rien.
Sagi Mann

3
J'avais l'habitude de l'utiliser avant, mais apparemment cela ne fonctionne pas maintenant depuis que Mountain Lion est apparu (solution de contournement possible ici): iwebinspector.com/help.html#ml
Omer

9

alert () fonctionne certainement pour moi.

Cependant, vous pouvez également faire beaucoup d'autres choses, comme créer votre propre alerte DHTML qui apparaît dans une couche. Cela peut être intéressant car vous pouvez envoyer plusieurs alertes à un seul div, sans arrêter votre application. Vous devriez également pouvoir y écrire une trace de pile (la trace de pile est dans l'objet d'exception et vous pouvez toujours lever vos propres exceptions).

Sinon, si vous exécutez sur le simulateur, votre "alert ()" personnalisé pourrait appeler l'objectif C et afficher la chaîne dans la fenêtre de la console du simulateur iPhone:

document.location.href = "http://debugger/" + 
   encodeURIComponent(outputString);   

et côté objectif C:

//--------------------------------------------------------------------
- (BOOL)webView:(UIWebView*)webView 
       shouldStartLoadWithRequest: (NSURLRequest*)req 
       navigationType:(UIWebViewNavigationType)navigationType {
    if ([[[req URL] host] isEqualToString:@"debugger"]){
        // do stuff with [[req URL] path] 
       }
}

Cela dit, j'ai une application qui utilise beaucoup de contenu UiWebView / javascript, et j'ai tendance à faire la plupart des développeurs javascript dans Chrome (simulant ce qui est nécessaire à partir de l'environnement iPhone)


que voulez-vous dire "alert ()" fonctionne certainement pour moi? Faire un appel à Objective-C est créatif, surpris de ne pas y avoir pensé avant puisque j'en fais déjà un peu! Merci. :)
bpapa

Oui, alert () fonctionne très bien. Peut-être que ce n'était pas le cas sur une version plus ancienne? Mais je viens de l'essayer et obtenir une fenêtre contextuelle qui semble presque identique à celle réalisée avec UIAlertView du côté objC.
rob

8

J'ai le moyen génial de déboguer UIWebView ou SFSafariViewController .

J'espère que cela aidera.

Étape 1: 
 Ouvrez Safari VC sur votre Mac (hahaha ne faites pas votre visage, si je dis dans votre Macbook, suivez simplement mes étapes)



Étape 2: Allez dans les préférences de Safari et cliquez sur Avancer. Vous obtiendrez ce paramètre sur l'écran de votre MacBook.

entrez la description de l'image ici

Activez maintenant le menu Afficher pour développer dans la barre de menus. Maintenant, tout votre travail est terminé. Pensez-vous que je plaisante: P: P no man ... 



Étape 3: Exécutez votre application dans Device ou Simulator. (Ne pensez pas simplement exécutez) Et allez dans votre application où vous ouvrez votre Webview ou SFSafariViewController. Jusqu'à présent, vous n'avez pas compris je sais. Soyez cool et voyez ma prochaine étape.

Étape 4: Ouvrez Safari dans votre MacBook et cliquez sur l'option de développement dans la barre de menus. Avez-vous obtenu quelque chose que votre MacBook, iPad / iPhone affiche correctement ?????

entrez la description de l'image ici



Étape 5: c'est fait. cliquez sur votre appareil et cliquez sur URL Une nouvelle fenêtre apparaîtra comme ceci. entrez la description de l'image ici




Étape 6: que cherchez-vous maintenant, c'est ici toutes les étapes.

Déboguez maintenant votre page Web sur cette console. Soyez heureux et profitez de votre journée tout en codant avec une tasse de thé ou de café.

IMP: N'oubliez pas d'activer Voir l'image ci-dessous entrez la description de l'image ici 









6

Je n'ai pas encore essayé, mais jetez un œil à ce Weinre

Ça a l'air très prometteur.


weinre est cool, mais sachez qu'il ne vient pas avec un débogueur JS pas à pas; c'est juste un "inspecteur Web". (Je ne l'ai pas remarqué avant d'avoir eu beaucoup de mal à le configurer sur mon iPhone.)
Dan Fabulich

Weinre semble avoir cessé de fonctionner depuis Lion: je ne peux plus obtenir de connexions, peut-être un problème de sandboxing.
rpitting le

Il semble qu'Adobe a maintenant un accord avec Weinre et propose une application appelée Adobe Shadow qui l'implémente. Fonctionne plutôt bien.
Adrian Harris Crowne

J'ai installé weinre via npm (gestionnaire de paquets node.js) et cela fonctionne pour moi dans Mountain Lion. npm install -g weinre
wprl

2
Les réponses aux liens uniquement conviennent mieux en tant que commentaire.
Joris Meys

4

C'est une vieille question. Mais j'aimerai toujours partager mes deux cents.

J'utilise jsconsole.com pour le débogage à distance. C'est facile. Incluez simplement une balise de script et utilisez les journaux de la console pour déboguer en imprimant. Cela peut également être utilisé pour le débogage sur un appareil réel.


3

Ancienne question, mais je pense avoir trouvé la meilleure solution, dans mon cas, vous devez déboguer uiwebview, mais je n'avais pas accès à l'application IOS et uniquement au contenu html et j'ai dû afficher quelques journaux JS, j'ai ajouté le code suivant pour charger le light firebug JS et l'afficher automatiquement:

l'appelant de JS

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://getfirebug.com/firebug-lite-debug.js';
document.head.appendChild(script);

ou chargez-le depuis html

<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

-1

Vous pouvez configurer un système comme celui utilisé dans PhoneGap pour envoyer des messages de JavaScript à Objective-C et vous connecter à partir de là. En un mot, ils définissent document.location avec un schéma personnalisé et bloquent ce schéma dans le rappel du délégué.

Vous pouvez profiter du fait qu'une UIWebView est la plupart des délégués pour une WebView. WebKit est techniquement non documenté pour iPhone, mais il est généralement identique à celui spécifié dans les en-têtes WebKit du bureau, y compris éventuellement WebScriptObject. J'utilise ceci pour le débogage, mais assurez-vous de supprimer ce code avant de le soumettre à Apple.

Pour obtenir une WebView à partir d'une UIWebView, implémentez une méthode déléguée comme -(void) webView:(id)inWebView didFinishLoadForFrame:(id)inWebFramedans une sous-classe de UIWebView. Appelez super si vous utilisez celui-là.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.