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

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

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.

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+

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.

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.

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

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.

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.

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.

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>

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>

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.