Wie sehe ich die Javascript-Fehler der PhoneGap-App in Xcode?

82

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

Mockee
quelle

Antworten:

82

Die eleganteste Möglichkeit, JavaScript-Fehler in Ihrer Cordova / PhoneGap-App anzuzeigen und zu debuggen, besteht darin, den Web Inspector von Ihrem Safari-Browser an die Webansicht in Ihrer iOS-App anzuhängen (wie bereits von Tom Clarkson erwähnt, benötigen Sie jedoch mindestens iOS 6 ).

  • Verwenden Sie auf Ihrem iPad oder iPhone die Einstellungen-App, um den Web Inspector in den erweiterten Einstellungen für Safari zu aktivieren
  • Verbinden Sie Ihr Gerät über USB mit einem Mac (es wird dann im Menü "Entwickeln" von Safari angezeigt.)
  • Starten Sie Ihre App
  • Navigieren Sie zu der Webansicht, die Sie debuggen möchten
  • Wählen Sie auf dem Mac im Menü "Safari-Entwicklung" den Namen Ihres Geräts und der App (deren HTML-Seite) aus dem Untermenü aus
  • Ein Web Inspector-Fenster wird geöffnet, in dem Sie das DOM durchsuchen, Haltepunkte festlegen usw. können.

Bildschirmauszug des Safari Develop-Menüs unter OS X.

Apples-Dokumentation zum Einrichten

Ein ausführliches Tutorial von Drittanbietern

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

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

  • Visual Studio-Code
  • Chrome DevTools
  • Mozilla Debugger

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


Mindestversion von Desktop Safari pro iOS-Version

Für jede iOS-Version benötigen Sie eine bestimmte Mindestversion von Desktop Safari, um die Remote-Webinspektion verwenden zu können (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; Versuchen Sie immer Safari Technology Preview
iOS 11
Safari 11+
iOS 12
Safari 12+
ᴠɪɴᴄᴇɴᴛ
quelle
2
Einverstanden. Die Verwendung des Safari-Webinspektors ist robuster als Weinre und das Auffinden von Fehlern viel schneller als das Einfügen in ein JS-Flusen-Tool. Außerdem können Sie DOM-Elemente überprüfen und bearbeiten, was fantastisch ist. Ich würde Leuten empfehlen, diesen Ansatz zu verwenden.
ElMarquis
1
Das erste Laden von Nachrichten ist nicht möglich, da die Verbindung einige Zeit in Anspruch nimmt.
Adriano Spadoni
Was ist mit Produktionsfehlern? Die App stürzt in Bezug auf WebView nie ab, aber die darin enthaltenen JS können Fehler auslösen. Daher erhalten Sie in iTunes Connect keine Absturzberichte, aber Benutzer sehen einen weißen Bildschirm.
Mirko
@Mirko Der Web Inspector ist nur beim Debuggen nützlich und hat keine Beziehung zu iTunes Connect.
16.
@Mirko Sie können Ihre App mit dem Cordova Crashlytics-Plug-In erstellen oder Google Firebase verwenden.
20.
47

Fügen Sie Folgendes nahe dem Anfang Ihres Dokuments ein, damit es vor einem Ihrer anderen JavaScript-Dateien ausgeführt wird.

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

Genießen Sie es, Details zu Ihren Javascript-Fehlern im Xcode-Konsolenfenster anzuzeigen.

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

Daher sollten Sie am Anfang Ihrer onDeviceReady- Funktion Folgendes hinzufügen :

console.log('Javascript OK');

Wenn beim Start der App nicht "JavaScript OK" in Ihrem Protokollfenster angezeigt wird, liegt irgendwo ein Syntaxfehler vor.

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

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

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

Hoffentlich wird das Debuggen dadurch etwas schmerzhafter.

elMarquis
quelle
9

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

Auf dem Desktop-WebView ist eine Funktion verfügbar, 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 ist nur für die Entwicklung vorgesehen ), aber machen Sie jetzt das, was Kris oben vorgeschlagen hat, und setzen Sie try catch-Blöcke auf den Code und verwenden Sie console.log

Um mögliche Syntaxfehler schnell zu erkennen, habe ich bei der Entwicklung die Seite in Desktop Safari geladen und aktualisiere sie schnell mit der sichtbaren Webkit-Fehlerkonsole.

Shazron
quelle
1
Dies funktioniert bei mir nicht mit Phonegap 1.1.0, Xcode 4.2 Beta und den Emulatoren iPhone mit iOS 4.3 und iPhone mit iOS 5.0. Ich füge console.log hinzu ("message"); Anrufe an Orten, an denen Alarm ("Nachricht"); funktioniert, aber es wird nichts in das Protokoll geschrieben. Weiß jemand, was falsch läuft?
nmr
4
Und die Antwort lautet ... console.log funktioniert erst, nachdem sich Phonegap selbst initialisiert hat. Ich habe es in body.onload genannt, was zu früh war.
nmr
3

debug.log sendet Nachrichten an die XCode-Konsole in Phonegap (so dass Sie entweder das Ergebnis einer Ausnahme protokollieren oder ein Debugging durchführen 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 aktivierter Debug-Konsole). Ich habe noch keinen Javascript-Fehler gefunden, der durch das Ausführen auf dem iPhone verursacht wurde und beim Debuggen mit der in Safari aktivierten Konsole nicht vorhanden war (obwohl ich weiß, dass es einige Unterschiede zwischen WebView und Safari auf dem iPhone gibt).

Kris Erickson
quelle
3

Ich bin gerade auf Weinre gestoßen

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

Es scheint gut zu funktionieren - bisher sehr beeindruckt.

asgeo1
quelle
1
@ asgep1 Beide Links sind jetzt tot! :(
MackieeE
3

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

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

Tom Clarkson
quelle
1
Dies ist bei weitem der beste Weg, dies zu tun. Es funktioniert sowohl für angeschlossene Geräte als auch für den IOS-Simulator und ist zuverlässiger als der Versuch, mit Weinre dasselbe zu erreichen.
ElMarquis
3

Um das Debuggen von Javascript 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 Fehlerbehebung angeht ...
Zunächst können Sie die App in Safari auf Ihrem PC ausführen und den Safari-Debugger 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 jedoch zumindest bei der Fehlerbehebung bei vielen Problemen (grundlegendes Javascript, HTML5 usw.) hilfreich sein.

Terrance
quelle
2

Um alle Fehler in der Javascript-Konsole anzuzeigen, stimme ich der Verwendung dieses Ereignis-Listeners zu

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

Sofern Sie das Cordova-Plugin nicht installiert haben, wird es auf der XCodes-Konsole nicht angezeigt. Gehen Sie zu Ihrem Projektordner und geben Sie Folgendes ein:

? cordova plugin add cordova-plugin-console

Dadurch kann der Javascript-Befehl 'console.log (' some string ') auf XCode angezeigt werden.

Beachten Sie, dass Sie Git usw. benötigen, aber wenn Sie Ihr Phonegap-Projekt in Xcode bearbeiten, werden Sie es höchstwahrscheinlich haben!

PS Stellen Sie sicher, dass Sie das Skript-Plug-In cordova.js einfügen, bevor Sie console.log verwenden

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

Fügen Sie dies am Anfang Ihrer index.html ein

<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>
Toolkit
quelle
1
Die Frage lautet in der Konsole, nicht in der Ansicht.
Nym
-2

Hier ist ein einfacher Weg, der für mich funktioniert hat:

  • CD in das Verzeichnis, das Ihre index.html-Datei im Terminal enthält
  • Starten Sie einen http-Server mit Python durch Aufrufen (ich habe Python 2.7 verwendet):

    Python -m SimpleHTTPServer

  • Zeigen Sie die Seite in Safari an, indem Sie die Adresse des HTTPServers in einen Browser eingeben. Für mich lautete die URL:

    http://0.0.0.0:8000/
  • Öffnen Sie Entwicklertools:

    In Chrome ist dies alt + Befehl + i. Zeigen Sie die Registerkarte "Konsole" an. Möglicherweise muss die Seite aktualisiert werden.

    In Safari: Safari -> Einstellungen -> Erweitert -> Aktivieren Sie "Entwicklungsmenü anzeigen". Menü "Entwickeln" -> Fehlerkonsole anzeigen (oder Alt + Befehl + c). Lade die Seite neu. Wenn Sie STRG + 5 drücken, wird die Registerkarte "Probleme" geöffnet.

Storm_m2138
quelle
3
Dies funktioniert nur, wenn Ihre Anwendung eine einfache Web-App ist. Das Aufrufen von PhoneGap- / Gerätefunktionen funktioniert in einem Standardbrowser nicht.
Xavier Poinas