Wie werden die Javascript-Fehler der PhoneGap-App in Xcode angezeigt?

Lesezeit: 6 Minuten

Benutzer-Avatar
mocke

Ich möchte meine PhoneGap-App in Xcode debuggen, aber die Konsole kann keine JavaScript-Fehler anzeigen.

Benutzer-Avatar
ᴠɪɴᴄᴇɴᴛ

Der eleganteste Weg zum Anzeigen und Debuggen von JavaScript-Fehlern in Ihrer Cordova/PhoneGap-App besteht darin, den Web Inspector Ihres Safari-Browsers an die Webansicht in Ihrer iOS-App anzuhängen (aber wie Tom Clarkson bereits erwähnt hat, benötigen Sie mindestens iOS 6 ).

  • Verwenden Sie auf Ihrem iPad oder iPhone die Einstellungs-App, um Web Inspector in den erweiterten Einstellungen für Safari zu aktivieren
  • Schließen Sie Ihr Gerät über USB an einen Mac an (es erscheint dann im Menü „Entwickeln“ von Safari)
  • Starten Sie Ihre Anwendung
  • Navigieren Sie zu der Webansicht, die Sie debuggen möchten
  • Wählen Sie auf dem Mac im Safari-Menü „Entwickeln“ den Namen Ihres Geräts und die App (seine HTML-Seite) aus dem Untermenü aus
  • Ein Web-Inspektor-Fenster wird geöffnet, in dem Sie das DOM durchsuchen, Haltepunkte setzen usw.

Bildschirmauszug des Safari-Entwicklermenüs unter OS X

Apples Dokumentation zum Einrichten

Ein gründliches Tutorial von Drittanbietern

Alternativ können Sie den Web Inspector von Chrome nach der Installation mit iOS-Geräten verbinden iOS WebKit-Debug-Proxy. Dies eröffnet auch die Möglichkeit, die Inspektion von Linux oder Windows aus durchzuführen.

Der Fernzugriff auf HTML, CSS und JavaScript Ihres iOS ist heutzutage noch flexibler geworden, da Sie die installieren können RemoteDebug iOS WebKit-Adapter auf dem oben genannten Debug-Proxy. Denn dieser Adapter übersetzt die WebKit-Remote-Debugging-Protokoll zum Chrome-Debugging-Protokollwerden diese (auf allen unterstützten Plattformen) als alternative Debugging- und Inspektionstools verfügbar:

  • Visual Studio-Code
  • Chrome-Entwicklungstools
  • Mozilla-Debugger

Übrigens funktioniert das Remote-Debugging mit dem Safari Web Inspector sogar in Kombination mit dem iOS-Simulator.


Mindestversion von Desktop Safari pro iOS-Version

Für jede Version von iOS benötigen Sie eine bestimmte Mindestversion von Desktop Safari, um die Remote-Webinspektion zu verwenden, siehe Liste unten.

iOS 6
Safari 6+
iOS 7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
Safari 9+/10+? Bitte kommentieren; immer versuchen Vorschau der Safari-Technologie
iOS 11
Safari 11+
iOS 12
Safari 12+

  • Einverstanden. Die Verwendung des Safari-Webinspektors ist robuster als Weinre und viel schneller zum Auffinden von Fehlern als das Einfügen in ein JS-Lint-Tool. Es erlaubt Ihnen auch, DOM-Elemente zu inspizieren und zu manipulieren, was fantastisch ist. Ich würde Leuten empfehlen, diesen Ansatz zu verwenden.

    – elMarquis

    17. Februar 2014 um 9:53 Uhr

  • Sie können keine ersten Ladenachrichten sehen, da das Herstellen der Verbindung einige Zeit in Anspruch nimmt.

    – Adriano Spadoni

    13. September 2016 um 10:01 Uhr

  • Was ist mit Produktionsfehlern? Die App stürzt in Bezug auf WebView nie ab, aber das js darin kann Fehler auslösen. Daher erhalten Sie bei iTunes Connect keine Absturzberichte, sondern Benutzer sehen einen weißen Bildschirm.

    – Mirko

    16. März 2017 um 14:38 Uhr

  • @Mirko Der Web Inspector ist nur beim Debuggen nützlich und hat keinen Bezug zu iTunes Connect.

    – ᴠɪɴᴄᴇɴᴛ

    16. März 2017 um 15:21 Uhr

  • @Mirko Sie könnten Ihre App mit dem erstellen Cordova Crashlytics-Plugin oder verwenden Sie Google Firebase.

    – ᴠɪɴᴄᴇɴᴛ

    20. März 2017 um 14:52 Uhr

Benutzer-Avatar
elMarquis

Fügen Sie Folgendes irgendwo am Anfang Ihres Dokuments ein, damit es vor allen anderen JavaScript-Codes ausgeführt wird.

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

Und genießen Sie die Anzeige von Details Ihrer Javascript-Fehler im Xcode-Konsolenfenster.

UPDATE: Die obige Technik protokolliert Fehler wie undefinierte Variablen. Syntaxfehler wie fehlende Kommas führen jedoch immer noch dazu, dass das gesamte Skript abbricht, ohne dass etwas protokolliert wird.

Daher sollten Sie Folgendes an den Anfang Ihrer hinzufügen onDeviceReady Funktion:

console.log('Javascript OK');

Wenn in Ihrem Protokollfenster beim Start der App nicht „JavaScript OK“ angezeigt wird, bedeutet dies, dass Sie irgendwo einen Syntaxfehler haben.

Um sich die Suche nach fehlenden Kommas zu ersparen, fügen Sie Ihren Code am einfachsten in einen Javascript-Validator wie diesen ein:

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

und lassen Sie es den Fehler für Sie finden.

Hoffentlich nimmt das das Debuggen etwas von der Mühe.

Beachten Sie, dass mit 0.9.2 (heute veröffentlicht) console.log für die Protokollierung plattformübergreifend standardisiert wurde (wobei debug.log veraltet ist).

Es gibt eine Funktion, die auf dem Desktop-WebView verfügbar ist, die nicht in der iOS-UIWebView verfügbar ist und alle Fehler abfängt (ich versuche, diese Funktionalität in ein Plugin zu hacken, das private APIs verwendet, aber das Plugin wäre nur für die Entwicklung ), aber tun Sie jetzt, was Kris oben vorgeschlagen hat, und fügen Sie try catch Blöcke in den Code ein und verwenden Sie console.log

Um mögliche Syntaxfehler schnell abzufangen, lasse ich die Seite beim Entwickeln in Desktop-Safari laden und aktualisiere sie schnell mit der sichtbaren Webkit-Fehlerkonsole.

  • Dies funktioniert bei mir nicht mit Phonegap 1.1.0, Xcode 4.2 Beta und sowohl dem iPhone mit iOS 4.3 als auch dem iPhone mit iOS 5.0-Emulatoren. Ich füge console.log(“message”); Anrufe an Orten, an denen alert(“message”); funktioniert, aber es wird nichts ins Log geschrieben. Weiß jemand, was schief läuft?

    – nmr

    13. Oktober 2011 um 23:25 Uhr


  • Und die Antwort ist … console.log funktioniert nicht, bis Phonegap sich selbst initialisiert hat. Ich habe es in body.onload aufgerufen, was zu früh war.

    – nmr

    14. Oktober 2011 um 0:04 Uhr

Benutzer-Avatar
Kris Erickson

debug.log sendet Nachrichten an die XCode-Konsole in Phonegap (so dass Sie entweder das Ergebnis einer Ausnahme protokollieren oder etwas debuggen können), Sie haben jedoch Recht, dass Sie andere Javascript-Fehler in Safari debuggen müssen (entweder auf dem Desktop oder auf dem iPhone mit eingeschalteter Debug-Konsole). Ich habe noch keinen Javascript-Fehler gefunden, der durch die Ausführung auf dem iPhone verursacht wurde und beim Debuggen mit der in Safari eingeschalteten Konsole nicht vorhanden war (obwohl ich weiß, dass es einige Unterschiede zwischen WebView und Safari auf dem iPhone gibt).

Benutzer-Avatar
asgeo1

Ich bin gerade gestoßen Weinre

Es ist ein Remote-Javascript-Debugger für Phonegap. Sie können entweder Ihren eigenen Weinre-Server einrichten oder den unter verwenden http://debug.phonegap.com/

Es scheint gut zu funktionieren – bisher sehr beeindruckt.

  • @asgep1 Beide Links sind jetzt tot! 🙁

    – MackieeE

    2. Februar 2015 um 11:57 Uhr

Benutzer-Avatar
Tom Clarkson

Wenn Sie iOS 6 verwenden, können Sie einfach den Safari-Webinspektor (im Entwicklungsmenü von Desktop-Safari) an Ihre App anhängen und vollständiges Javascript-Debugging erhalten.

Es gibt ein paar Bereiche, in denen es etwas eingeschränkt ist – Startfehler und Plugin-Aufrufe -, aber es funktioniert gut für so ziemlich alles andere.

  • @asgep1 Beide Links sind jetzt tot! 🙁

    – MackieeE

    2. Februar 2015 um 11:57 Uhr

Benutzer-Avatar
BananeNeil

Um das Javascript-Debugging in Xcode zum Laufen zu bringen, würde ich mir Folgendes ansehen.

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

Was die zusätzliche Fehlersuche angeht…
Zunächst könnten Sie die App in Safari auf Ihrem PC ausführen und den Debugger von Safari verwenden (oder Chrome, da beide ähnliche Rendering-Engines ausführen). Dies wirkt sich nicht auf die erweiterten Logikfehler und viele Ihrer API-Probleme aus, sollte aber zumindest bei der Fehlerbehebung vieler Probleme helfen (grundlegendes Javascript, HTML5 usw.).

1143370cookie-checkWie werden die Javascript-Fehler der PhoneGap-App in Xcode angezeigt?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy