Remote Debugging mobiler Webanwendungen

Avatar von Alberto Assmann

Mobile Anwendungen liegen im Trend.
Neben den nativen Apps gibt es auch noch die Webapps, also speziell für mobile Geräte angepasste Webseiten, basierend auf Javascript, HTML und CSS.

Eine Möglichkeit, plattformübergreifende Webapps zu erstellen bietet das Javascript Framework jQuery Mobile, mit dem es möglich ist, auf Events von mobilen Geräten zu reagieren, wie etwa Touch Gesten, das Kippen des Smartphones und vielen weiteren (siehe jQuery Mobile Doku).

Nachdem man eine solche Webapp geschrieben hat testet man diese üblicherweise auf allen Geräten die unterstützt werden sollen und veröffentlicht entsprechende Anwendung nach erfolgreichen Tests.

Da man nur in den seltensten Fällen für alle unterstützten Smartphones auf echte Geräte zurückgreifen kann, nutzt man hier entsprechende Emulatoren um das Verhalten nicht vorhandener Testgeräte zu simulieren.
In der Theorie sollte spätestens nach diesen Tests nichts mehr schief gehen.

In der Realität kann es aber vorkommen das sich Emulator und echtes Gerät unterscheiden und sei dies nur in Kleinigkeiten wie Netzstabilität oder das etwas im mobilen Browser fehlerhaft interpretiert wird.
Genau aus diesem Grund setzt man auf Frameworks mit hoher Testabdeckung, wie jQuery Mobile, welches sich jedoch noch im Alphastadium befindet.

Was kann man tun wenn die Anwendung aber nicht auf allen Geräten fehlerfrei läuft und sich der Fehler in der Testumgebung nicht reproduzieren lässt?
Nimmt man an ein Kunde eines Auftragsgebers hat ein Problem mit der Webanwendung auf seinem Smartphone, er bekommt anstatt der Anwendung nur eine weiße Seite zu sehen.
Bei einer normalen Webanwendung kann man per Remotezugriff Firebug oder ähnliche Tools direkt im Browser des Kunden aufrufen, um den Fehler zu analysieren.

Auf einem mobilen Gerät hat man diese Möglichkeit leider nicht.

Abhilfe kann hier das Tool JSConsole.com schaffen.
JSConsole ermöglicht es, eine Remote-Verbindung auf dem entsprechenden Gerät zu implementieren.
Hierfür stell JSConsole.com eine Onlinekonsole bereit die den eingegebenen Javascriptcode auf dem verbundenen Remote Host ausführt, in diesem Fall auf dem mobilen Endgerät.

Um eine Verbindung zwischen JSConsole und dem Smartphone herzustellen, reicht es aus, die entsprechende Webanwendung, die auf dem Gerät debuggt werden soll, durch Einbinden eines zusätzlichen Skripts zu erweitern.

Damit nur das fehlerhafte Gerät angesprochen wird muss ein Alleinstellungsmerkmal gefunden werden, welches als Verbindungs-ID genutzt wird.
Verzichtet man auf dieses Verbindungs-ID oder wählt man sie nicht eindeutig, so kann es passieren dass der Javascriptcode auch auf anderen Endgeräten zur Ausführung kommt und somit der Betrieb erheblich gestört wird.
In diesem Beispiel Fall wird eine zufällige Nummer erzeugt und ein Prefix davor gesetzt.
Anschließend wird das remote.js Script von JSConsole.com unter Angabe der generierten ID geladen.
Über diese ID wird die Verbindung später identifiziert und somit sichergestellt das nur auf dem entsprechenden Zielgerät der eingegebene Javascriptcode zur Ausführung kommt.
Das ganze sieht dann wie folgt aus:


Die generierte ID sollte ebenfalls auf dem mobilen Gerät ausgegeben werden, zum Beispiel per Alert, damit der Kunde sie Beispielsweise per Telefon durchgeben kann und somit das Zielgerät eindeutig identifiziert werden kann.

Auf JSConsole.com kann nun mit folgender Eingabe die Verbindung etabliert werden:

:listen ID

ID ist selbstverständlich die ID, die vom Kunden abgefragt wurde.

In der Konsole sollte nun die Meldung „Connected to …“ auftauchen.
Sobald dies der Fall ist steht eine vollständige Remote Javascript Konsole zur Verfügung.
Hier besteht nun die Möglichkeit mit dem Befehl

:load SCRIPT

ein Javascript-Programm direkt auf das Gerät zu laden. Diverse Bibliotheken wie z.B. jQuery, dojo und weitere stehen standardmäßig über Shortcuts zur Verfügung.
So kann Beispielsweise das jQuery Framework per

:load jquery

nachgeladen werden und steht danach auf dem Endgerät zur Verfügung.
Alle Verfügbaren Shortcuts bekommt man mit dem Befehl

:help

aufgelistet.

Um den bisherigen Konsoleninhalt zu löschen reicht die Eingabe des Befehls

:clear

JSConsole.com zeigt sich als nützlicher Debug-Helfer in Situationen in die üblichen Tools dieser Art nicht zur Verfügung stehen, Beispielsweise in mobilen Browsern.

Das größte Manko dieser Anwendung ist jedoch die mangelnde Sicherheit, hier wäre es Wünschenswert wenn es eine Art Filter gäbe, welche Connection ID’s man Debuggen darf, da momentan jeder der die ID kennt darüber entsprechenden Code direkt in die Anwendung einschleusen kann.
Aufgrund der Mächtigkeit von Javascript ensteht hierdurch eine schwere Sicherheitslücke, es ist also äußerste Vorsicht geboten und man sollte diese Möglichkeit ausschließlich nutzen wenn es keine anderen gibt, beispielsweise wenn der Fehler nicht auf eigenen Testgeräten reproduziert werden kann.

Die Existenz und Verwendung von JSConsole.com sollte jedem Entwickler für mobile Anwendungen bekannt sein, da es trotz der Sicherheitsschwächen im genannten Fehlerfall kaum eine andere Möglichkeit als das Remotedebugging gibt um das Problem direkt auf dem Gerät zu lokalisieren.
Da der Sourcecode des Tools frei verfügbar ist wäre es denkbar einen eigenen JSConsole Server aufzusetzten, welcher zusätzlich mit einem Login ausgerüstet ist, um das Remote Debugging abzusichern und das Remote Script von diesem Server zu laden.

Avatar von Alberto Assmann

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


Für das Handling unseres Newsletters nutzen wir den Dienst HubSpot. Mehr Informationen, insbesondere auch zu Deinem Widerrufsrecht, kannst Du jederzeit unserer Datenschutzerklärung entnehmen.