Welche Methoden gibt es, um Javascript in einer UIWebView zu debuggen?


136

Ich versuche herauszufinden, warum etwas mit Javascript in einer UIWebView nicht funktioniert. Meines Wissens gibt es keine Möglichkeit, innerhalb von XCode einen Haltepunkt für eine js-Datei festzulegen. Kein Problem, ich gehe einfach zurück zu 2004 und verwende Alarmstatus. Oh, warte, sie scheinen auch nicht in einem UIWebView zu funktionieren.

Das einzige, woran ich denken könnte, ist, meine HTML- und JS-Dateien auf meinen Desktop zu exportieren und dann einfach mein Debugging in Safari durchzuführen. Und das funktioniert! Aber natürlich tritt der Fehler, mit dem ich in UIWebView kämpfe, in Safari nicht auf.

Gibt es andere Möglichkeiten zum Debuggen in einer UIWebView oder Tricks, die ich ähnlich wie bei der Old-School-Warnmethode anwenden kann?

Antworten:


277

Wenn Sie iOS> = 6 verwenden und einen Berglöwen (10.8) oder Safari> = 6 haben, können Sie einfach:

  1. Öffnen Sie die Anwendung im Simulator (oder Ihr Gerät in XCode> = 4.5.x).
  2. Öffnen Sie Safari (gehen Sie zu Preferences -> Advancedund stellen Sie sicher, dass "Entwicklungsmenü in der Menüleiste anzeigen" aktiviert ist.
  3. Wählen Sie aus der Menüleiste (von Safari) Develop -> iPhone Simulator -> [your webview page].

Das ist es !


6
Dies funktioniert nur, wenn die App in einem Simulator ausgeführt wird. Wenn Sie ein iOS-Gerät zum Debuggen verwenden müssen, sehen Sie diesen Ansatz mobiarch.wordpress.com/2013/04/06/…
RajV

7
@RajV Sie können UIWebViews auf einem physischen Gerät debuggen, aber nur diejenigen, die Sie direkt mit XCode auf Ihrem Gerät gespeichert haben, nicht diejenigen aus dem Appstore.
Alecail

1
Ziemlich offensichtlich, aber das kann hilfreich sein. Ich habe dies auf iOS7 Simulator unter OSX 10.9 Mavericks und Safari 7 getestet - es funktioniert wunderbar. Danke dafür.
Moe

1
@refaelos Danke !! Es funktioniert nicht mit meinem physischen Gerät, wenn ich das vorläufige Entwicklungsprofil verwende.
umang2203

11
Sie sind sich im Simulator nicht sicher, aber damit dies auf einem Gerät funktioniert, müssen Sie eine Option in den Einstellungen aktivieren. Settings> Safari> Advanced> Web Inspector<- Aktivieren Sie diese
Hodson

31

Diese Abfrage steht ganz oben auf Google. Es lohnt sich also, auf den in iOS5 versteckten remoteInspector zu verlinken. Dies ist bei weitem der beste Weg, um Ihre UIWebViews zu debuggen. Kompilieren Sie ihn nur unter bestimmten Bedingungen, bevor Sie ihn an Apple senden.


3
Funktioniert immer noch, verwenden Sie es wie folgt: [NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];Denken Sie daran, den Aufruf zu entfernen, wenn Sie für die Veröffentlichung erstellen!
Rpitting

1
Es ist eine großartige Technik. Beachten Sie jedoch, dass der Debugger nur auf Safari zu funktionieren scheint. Ich habe es mit anderen Browsern (z. B. Chrome) versucht und es wurde nichts angezeigt.
Sagi Mann

3
Früher habe ich das verwendet, aber anscheinend funktioniert es jetzt nicht mehr, seit Mountain Lion aufgetaucht
Omer

9

alert () funktioniert auf jeden Fall bei mir.

Sie können jedoch auch viele andere Dinge tun, z. B. eine eigene DHTML-Warnung erstellen, die in einer Ebene angezeigt wird. Dies kann hilfreich sein, da Sie mehrere Warnungen an einen einzelnen Div senden können, ohne Ihre App zu stoppen. Sie sollten auch in der Lage sein, eine Stapelverfolgung darauf zu schreiben (die Stapelverfolgung befindet sich im Ausnahmeobjekt, und Sie können jederzeit Ihre eigenen Ausnahmen auslösen).

Wenn Sie auf dem Simulator ausgeführt werden, kann Ihr benutzerdefiniertes "alert ()" alternativ Ziel C aufrufen und die Zeichenfolge im Konsolenfenster des iPhone-Simulators anzeigen:

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

und auf der objektiven C-Seite:

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

Das heißt, ich habe eine App, die viel mit UiWebView / Javascript zu tun hat, und ich neige dazu, die meisten Javascript-Entwickler in Chrome zu machen (um zu simulieren, was in der iPhone-Umgebung erforderlich ist).


Was meinst du mit "alert ()" funktioniert auf jeden Fall für mich? Ein Anruf bei Objective-C ist kreativ, überrascht, dass ich vorher nicht darüber nachgedacht habe, da ich schon ein bisschen davon mache! Vielen Dank. :)
Papa

Ja, alert () funktioniert einwandfrei. Vielleicht war es bei einer älteren Version nicht so? Aber ich habe es gerade versucht und ein Popup erhalten, das fast identisch mit dem mit UIAlertView auf der Objektseite erstellten aussieht.
Rob

8

Ich bekomme die großartige Möglichkeit, UIWebView oder SFSafariViewController zu debuggen .

Ich hoffe es wird helfen.

Schritt 1: 
 Öffnen Sie Safari VC auf Ihrem Mac (hahaha, machen Sie kein Gesicht, wenn ich in Ihrem Macbook sage, folgen Sie einfach meinen Schritten)



Schritt 2: Gehen Sie zu den Safari- Einstellungen und klicken Sie auf Erweitert . Sie erhalten diese Einstellung auf Ihrem MacBook-Bildschirm.

Geben Sie hier die Bildbeschreibung ein

Aktivieren Sie nun das Menü Show to Develop in der Menüleiste. Jetzt ist Ihre ganze Arbeit erledigt. Denkst du, ich mache Witze: P: P no man ... 



Schritt 3: Führen Sie Ihre Anwendung in Gerät oder Simulator aus. (Denken Sie nicht, führen Sie es einfach aus.) Gehen Sie in Ihre Anwendung, in der Sie Ihre Webview oder SFSafariViewController öffnen. Bis jetzt hast du nicht verstanden, ich weiß. Sei cool und sieh meinen nächsten Schritt.

Schritt 4: Öffnen Sie Safari in Ihrem MacBook und klicken Sie in der Menüleiste auf Entwicklungsoption. Haben Sie etwas bekommen, das auf Ihrem MacBook, iPad / iPhone richtig angezeigt wird?

Geben Sie hier die Bildbeschreibung ein



Schritt 5: Fertig. Klicken Sie auf Ihr Gerät und dann auf URL. Ein neues Popup wird wie folgt angezeigt. Geben Sie hier die Bildbeschreibung ein




Schritt 6: Was suchst du jetzt ? Hier sind alle Schritte.

Debuggen Sie jetzt Ihre Webseite auf dieser Konsole. Seien Sie glücklich und genießen Sie Ihren Tag beim Codieren mit einer Tasse Tee oder Kaffee.

IMP: Vergessen Sie nicht, See Below Image zu aktivieren Geben Sie hier die Bildbeschreibung ein 









6

Ich habe das noch nicht ausprobiert, aber schau es dir an dir Weinre an

Sieht sehr vielversprechend aus.


weinre ist cool, aber Vorsicht, es wird kein schrittweiser JS-Debugger mitgeliefert. Es ist nur ein "Web Inspector". (Ich habe das erst bemerkt, als ich mir große Mühe gegeben hatte, es auf meinem iPhone einzurichten.)
Dan Fabulich

Weinre scheint seit Lion nicht mehr zu arbeiten: Ich kann keine Verbindungen mehr herstellen, möglicherweise ein Problem mit Sandboxing.
Rpitting

Es scheint, dass Adobe jetzt einen Vertrag mit Weinre hat und eine App namens Adobe Shadow anbietet, die diese implementiert. Funktioniert ziemlich gut.
Adrian Harris Crowne

Ich habe weinre über npm (node.js Paketmanager) installiert und es funktioniert für mich in Mountain Lion. npm install -g weinre
wprl

2
Nur-Link-Antworten eignen sich besser als Kommentar.
Joris Meys

4

Dies ist eine alte Frage. Aber ich möchte trotzdem meine zwei Cent teilen.

Ich habe jsconsole.com für das Remote-Debugging verwendet. Es ist einfach. Fügen Sie einfach ein Skript-Tag hinzu und verwenden Sie Konsolenprotokolle zum Debuggen durch Drucken. Dies kann auch zum Debuggen auf einem realen Gerät verwendet werden.


3

Alte Frage, aber ich denke, ich habe die beste Lösung gefunden. In meinem Fall müssen Sie uiwebview debuggen, aber ich hatte keinen Zugriff auf die IOS-App und nur auf den HTML-Inhalt und musste einige JS-Protokolle anzeigen. Ich habe den folgenden Code hinzugefügt So laden Sie den Light Firebug JS und zeigen ihn automatisch an:

Aufruf von JS

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

oder laden Sie es von HTML

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

-1

Sie können ein System wie das in PhoneGap verwendete einrichten , um Nachrichten von JavaScript an Objective-C zu senden und von dort aus zu protokollieren. Kurz gesagt, sie setzen document.location mit einem benutzerdefinierten Schema und blockieren dieses Schema im Delegatenrückruf.

Sie können die Tatsache nutzen, dass ein UIWebView die meisten Delegaten für ein WebView sind. WebKit ist für das iPhone technisch nicht dokumentiert, entspricht jedoch größtenteils den Angaben in den Desktop-WebKit-Headern, möglicherweise einschließlich des WebScriptObject. Ich verwende dies zum Debuggen, aber entfernen Sie diesen Code unbedingt, bevor Sie ihn an Apple senden.

Implementieren Sie eine Delegatmethode wie -(void) webView:(id)inWebView didFinishLoadForFrame:(id)inWebFramein einer Unterklasse von UIWebView, um eine WebView von einer UIWebView abzurufen. Rufen Sie super an, wenn Sie diesen verwenden.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.