PhoneGap und Cordova Debug leicht(er) gemacht

PhoneGap Apps am Smartphone zu debuggen kann mitunter eine Herausforderung sein. Auf einigen Plattformen ist es bereits schwierig an die Konsolenausgabe zu kommen, von einem richtigen Debugger ganz zu schweigen. Da fühlt man sich schon mal ins letzte Jahrtausend zurückversetzt, in die Zeit vor Debuggern. Zum Glück geht das Kompilieren etwas schneller als damals. Doch es gibt Möglichkeiten, sich die Arbeit zu erleichtern und auf manchen Geräten sogar einen richtigen Debugger zu nutzen.

Problemstellung

Da eine PhoneGap App in einer Web-View der nativen App ausgeführt wird, greift der normale Debugger der jeweiligen Plattform nicht, es können keine Haltepunkte im JavaScript definiert werden, Variablen können nicht ausgelesen werden und die Konsolenausgaben gehen an die Konsole der Web-View – welche nur bei Android auf die normale Konsole weitergeleitet und somit ausgegeben wird. Ein Durchforsten von JSON Objekten, die auf die Konsole ausgegeben werden – wie man es bei der Web-Entwicklung im Web-Inspector gewohnt ist – ist ebenfalls nicht möglich. Zwar gibt es ein PhoneGap Plugin, welches auf den meisten Plattformen die Web-Konsolenausgaben an die Konsole der jeweiligen Plattform weiterleitet, doch funktioniert dieses nur bedingt, es kann beispielsweise auf Android immer nur eine Variable ausgegeben werden. Auch das Durchforsten von Objekten funktioniert nicht.

Debugging im Browser

Die besten Debugging Möglichkeiten für eine Web-App oder PhoneGap App hat man im Browser vom Computer – da eine Web-App auch nur eine Webseite ist, kann man sie im Browser starten. Dies funktioniert allerdings nicht ohne ein paar kleine Tricks. PhoneGap bietet zwar die Möglichkeit, die App direkt im Browser bereitzustellen (mit dem Befehl phonegap serve), allerdings muss man nach jeder Änderung des „www“-Ordners die App neu bauen, und den Phonegap Befehl erneut ausführen. Man kann auch selbst einen beliebigen Server starten, der den „www“-Ordner zur Verfügung stellt. Da eine PhoneGap-App allerdings auf das „deviceready“ Event wartet – welches aus dem PhoneGap Script ausgelöst wird - wird man zunächst wenig Erfolg damit haben, da dieses nur auf den jeweiligen Smartphones funktioniert. Eine Möglichkeit ist, das PhoneGap Script im „www“-Ordner mit einem anderen zu ersetzen, welches das Event sofort auslöst, oder man überprüft ob die Variable document.URL mit „http://“ beginnt – dann befindet man sich im Browser und braucht das „deviceready“ Event nicht abzuwarten. Die größte Einschränkung im Browser sind die fehlenden PhoneGap Methoden: Alle Funktionen für die PhoneGap benötigt wird, kann man auf diese Weise nicht testen.

Möchte man die PhoneGap Methoden ebenfalls im Browser testen, so ist der von Blackberry entwickelte Ripple Emulator, den es als Plugin für den Chrome Browser gibt, sehr nützlich. Hat man den „www“-Ordner mit einem lokalen Server bereitgestellt, so kann man die Web-Adresse einfach auf "http://emulate.phonegap.com/" eingeben und man hat seine Web-App lauffähig mit PhoneGap Methoden im Ripple-Emulator, allerdings nur mit einer veralteten PhoneGap Version. Hier hat man alle Debugging Möglichkeiten, die man sonst bei der Web-Entwicklung auch hat und man kann einige Eigenschaften von Smartphones simulieren, wie zum Beispiel die Geo-Koordinaten.

Debugging am Smartphone

Da sich Geräte aber oft anders Verhalten als in einem solchen Emulator – vor allem da sie andere Browser zur Darstellung verwenden – muss man trotzdem vieles direkt am Gerät testen. Die einfachste Möglichkeit, um am Gerät einzelne Variablenwerte oder kurze Meldungen auszugeben sind die alert Methode von JavaScript oder ein HTML Element, das mittels absoluter Positionierung immer im Vordergrund bleibt und in welches man die Meldungen ausgibt. In seltenen Fällen reicht das aus.

Bessere Debugging Möglichkeiten am Gerät hat man, indem man die Meldungen mithilfe der File-API in eine Datei speichert und diese später ausliest. Objekte kann man mithilfe der Methode JSON.stringify in Text umwandeln. Auf diese Weise kann man die Ausgaben während der Benutzung allerdings nicht live sehen. Es erwies sich als praktikabel, die Meldungen nicht in eine Datei zu speichern, sondern an einen Server zu senden, welcher jene sofort an den Entwickler ausgibt. Vor dem Veröffentlichen einer App sollten solche Debugging-Hilfen allerdings wieder aus der App ausgebaut werden.

Remote Debugging

Mittels remote Debugging kann man sogar am Device einen Web-Inspector nutzen, der einem im Browser am Computer angezeigt wird. Dazu benötigt man allerdings zusätzliche Tools, welche leider selten wirklich gut funktionieren. Auf einigen Geräten funktionieren sie gar nicht oder verschlechtern die Performance, so dass sie nicht nutzbar sind. Am besten funktioniert diese Möglichkeit auf iOS und Android 4.4 Geräten mit dem Tool GapDebug von Genuitec.

Fazit

Eine Lösung, die für jedes Gerät funktioniert, gibt es definitiv nicht. Man wird nicht umhin kommen, mehrere der genannten Möglichkeiten zu nutzen. Es ist sehr wichtig, Web-Apps auf möglichste vielen Geräten mit unterschiedlichen Betriebssystem Versionen zu testen, da es oft bei einzelnen Versionen oder Geräten zu unerwarteten Verhaltensweisen oder Darstellungsproblemen kommt. Die W3C Standards werden nicht in jedem Browser gleichermaßen unterstützt, vor allem neuere Standards des CSS3 und HTML5. Zudem unterscheidet sich die Webview Engine, also die Komponente, die für das Darstellen von HTML innerhalb einer App zuständig ist, oft von der des Browsers am Smartphone. Das detaillierte Testen der finalen App ist daher unerlässlich.