Wenn man Web-Apps erstellt, gehört das leidige Testen und Fehler suchen einfach dazu – wie eigentlich immer beim Programmieren. Bei der Arbeit an Webseiten geht das mittlerweile bekanntlich ganz einfach: die Browser-Konsole zeigt exakt an, welcher Fehler in welcher Zeile aufgetreten ist. Schwieriger wird es beim Smartphone.
Zwar haben die neusten Mobile-Browser (bei Android ab Version 4.4) eine Remote-Debugging-Schnittstelle und das erleichtert die Arbeit erheblich. Man schließt das Smartphone einfach via USB-Kabel an den Rechner an und erhält die Konsolenausgabe in gewohnter Form auf dem Desktop.
Allerdings müssen Apps auch auf etwas älteren Smartphones funktionieren und die machen es einem nicht leicht, an das Fehlerlog ranzukommen. Da helfen nur externe Tools, die die Konsolenausgabe über Web-Sockets an einen Server schicken. Die Ausgabe kann dann über eine Weboberfläche eingesehen werden. Hier ein Übersicht über die bewährten Möglichkeiten:
JSConsole
JSConsole ist ein Online-Dienst, der sich gut für die schnelle Fehlersuche eignet. Damit lassen sich ein Token erzeugen und die Javascript-Dateien einbinden. Dann wird die ganze Konsolenausgabe auf den Server geleitet und der stellt die gewünschten Informationen wie gewohnt im Browser dar. Der Nachteil von JSConsole ist, dass die Log-Ausgaben durchs Netz geschickt werden müssen.
Weinre
Für ausführlichere Tests empfiehlt sich das Weinre-Projekt, das deutlich mehr Funktionen bietet. Weinre steht für „Web Inspector Remote“ und erinnert optisch an die frühere Browser-Konsole von Chrome und Safari. Dafür muss ein Server auf dem lokalen Rechner oder im Netz installiert werden. Auf der Client-Seite wird ein Javascript eingebunden, das mit dem Server kommuniziert, der dann die Ausgabe darstellt. Weinre zeigt unter anderem den aktuelle HTML-Baum an, dort kann man Filesheets bearbeiten, die dann live geändert werden. Außerdem werden sämtliche eingebundenen Ressourcen dargestellt. Hilfreich ist auch die Netzwerkübersicht, die anzeigt, wo die Daten herkommen, wie lange die Übertragung dauert etc. Nicht zuletzt hat Weinre ein für App-Tests sehr sinnvolles Profiling eingebaut, mit dem man einzelne Codestellen detailliert überprüfen kann. Weinre bietet sich für die Arbeit im Team an, da es sich durch das Anhängen eines beliebigen Hashes an die URL quasi personalisieren lässt und mehrere Instanzen parallel verwaltet werden können.
Console.io
Console.io ist eine neuere Remote-Web-Konsole, die ebenfalls über einen Server im lokalen Netzwerk oder im Web funktioniert. Die Installation läuft auch hier über npm und auf der Client-Seite muss ein Javascript eingefügt werden. Console.io hat ähnliche Darstellungen wie Weinre, hat aber den Vorteil, dass es auch von „exotischeren“ Geräten wie Fernsehern unterstützt wird. Neben dem Console-Log bietet es noch eine Source-Ansicht, die alle geladenen Resourcen anzeigt und die HTML-Baum-Ansicht. Praktisch ist, dass man in der Browseroberfläche des Servers Code-Schnipsel eingeben und ausprobieren kann. Außerdem kann man sich einige Informationen wie aktuelle Bildschirmgröße, User Agent, Cookies, Local-Storage, Session-Storage und das Location-Object anzeigen lassen. Console.io stellt zudem einen Editor zur Verfügung, der es erlaubt, vom Server aus Javascript-Code auf der Clientseite auszuführen.
Von den Funktionen her sind sich Weinre und Console.io sehr ähnlich. Ich persönlich arbeite am Liebsten mit dem Weinre-Projekt, das hängt aber stark davon ab, welche Funktionen man gerade benötigt.