Mobiles Web Debugging

Beim Thema Web Debugging denkt vermutlich fast jeder mit Webentwicklung auch nur ansatzweise Vertraute nicht zuletzt an diverse Tools, mit denen etwa aus einem Browser heraus Websites analysiert werden können. Treten externe Services hinzu, beispielsweise zur Untersuchung der Ladezeit einer Website und einer Einschätzung von deren „guter“ Umsetzung hinsichtlich Performance, Usability und Accessibility, sind bereits zentrale Aspekte des Web Debuggings erkannt.

Ist die Rede hingegen explizit von „mobilem“ Debugging oder der Analyse von Websites mithilfe mobiler Geräte, kommen oftmals zuerst Lösungen wie Crossbrowsertesting oder auch Ghostlab in den Sinn, mit deren Hilfe Erscheinungsbild und Verhalten von Websites auf verschiedenen Tablets und Smartphones getestet werden können. Dies ist freilich so richtig wie wichtig, doch wollen wir uns heute einer anderen Art mobilen Debuggings widmen – der Untersuchung von Websites vermittels mobiler Geräte.

So selbstverständlich wir das Internet morgens in der Strassenbahn auf unseren Smartphones und abends auf dem Sofa mit unseren Tablets nutzen, wird doch nur vergleichsweise selten von der Möglichkeit Gebrauch gemacht, Websites mithilfe diverser Apps und Addons direkt auf dem jeweiligen Gerät zu durchleuchten. Gewiss, sobald ein Notebook oder PC in Reichweite ist, stellen diese Gerätegattungen weiterhin die Mittel der Wahl für die meisten Webentwickler dar. Dennoch sollte die Möglichkeit nicht unterschätzt werden, Websites auch auf dem Gerät genauer untersuchen zu können, auf dem sie auch tatsächlich betrachtet werden. Hierfür gibt es Apps und Workarounds, die mitunter weit über das blosse Anzeigen des Quelltextes hinausreichen, und von denen wir einige wenige an dieser Stelle vorstellen möchten.

srcfari splitscreen

Scrfari (iOS)

Für iOS steht zum Beispiel mit Srcfari ein Browser zur Verfügung, mit dem schnell und einfach zwischen der gewohnten Ansicht der Website und deren Quellcode hin- und her gewechselt werden kann.

Besonders praktisch ist zudem, dass Srcfari die eingebundenen Assets erkennt und in einer übersichtlichen Struktur zur gesonderten Betrachtung anbietet. Damit entfällt das mühsame Suchen der Links beispielsweise zu CSS- oder js-Dateien auf Displays, die nicht unbedingt für Arbeit am Quellcode optimiert sind. Wie sich die Auswahl verknüpfter Assets darstellt, macht ein Screenshot der iPad-Version anschaulich.

srcfari ios

Scrfari (iOS)

Apps dieser Art stehen auch für Android zahlreich zur Verfügung. Unter Schlagwörtern wie „HTML Viewer“, „HTML Editor“ oder ähnlich finden sich zahlreiche vergleichbare Apps, mit denen Websites betrachtet und deren Quelltext untersucht werden kann; der HTML/CSS Website Inspector ist nur eine davon. Wird Chrome als Browser auf einem Android-Device genutzt, lässt sich der Quellcode auch ganz leicht innerhalb dieses Browsers anzeigen, wenngleich ohne weitere Zusatzfunktionen. Hierfür ist lediglich die Eingabe von „view-source:“ vor der URL nötig, also führt beispielsweise die Eingabe von „view-source:k-webs.ch“ zu folgender Ansicht:

view source code in chrome on android

Quellcodeanzeige in Chrome (Android)

 

Allzu tief dringt man mit all diesen Lösungen aber gewiss nicht in die technische Umsetzung einer Website vor – zu mühsam ist die Codeanalyse, zumal auf vergleichsweise kleinen Displays, und zu gering sind die Möglichkeiten, die jene Apps bieten. Allerdings gibt es darüber hinaus auch Apps, die zumindest auf den etwas grösseren Tablet-Displays durchaus zur umfassenderen Analyse der Unter- und Hintergründe einer Website geeignet sind und die entsprechenden Tools mitbringen. Mit MIHTool (erhältlich in einer eingeschränkten, aber kostenlosen Basic-Version und einer kostenpflichtigen Pro-Version) kommen iOS-Nutzer in den Genuss eines veritablen ‚Debuggers‘. Zumindest ist uns bislang keine vergleichbare Lösung für Android bekannt, wir würden uns über Hinweise allerdings freuen!

Hiermit ist wesentlich mehr möglich als die reine Betrachtung des Quellcodes. Vielmehr stehen zentrale Funktionen der bekannten Developer Tools nun auch mobil zur Verfügung, die ergänzt werden durch weitere Tools zur (Performance-) Analyse. Nutzbar sind diese Möglichkeiten sowohl auf iPhones als auch iPads, wobei gerade bei der Arbeit in den (verschachtelten) Menüs die Tablets ihre Stärke ausspielen können:

Webdebugging mit MIHTool

MIHTool (iOS)

Webdebugging mit MIHTool

MIHTool (iOS)

Webdebugging mit MIHTool

MIHTool (iOS)

Webdebugging mit MIHTool

MIHTool (iOS)



Dieser Befund gilt auch für die iOS-Version  der Software HttpWatch, die ebenfalls ein gezieltes Debugging von Websites komfortabel auf dem mobilen Device ermöglicht:

Webdebugging mit httpWatch

HttpWatch (iOS)

Webdebugging mit httpWatch

HttpWatch (iOS)

Sollen die eigenen Websites hingegen in erster Linie unter SEO-Gesichtspunkten analysiert und überwacht werden, gibt es wiederum eine Vielzahl speziell hierfür entwickelter Apps, angefangen bei den offiziellen Google Analytics-Versionen für iOS und Android.

Wie weit das mobile Debugging tatsächlich auch mobil betrieben wird, bleibt gewiss jedem selbst überlassen. Vor allem muss natürlich bedacht werden, dass die meisten Erkenntnisse auch über die eigene Website oder das aktuell bearbeitete Projekt, die man „mobil“ gewinnt, meist dennoch am Arbeitsplatz und in gewohnter Entwicklungsumgebung in konkretes Bugfixing einfliessen müssen. Dennoch ist es gut zu wissen, die nötigen Tools auch unterwegs abrufen und nutzen zu können.

Nutzen Sie eines der genannten Tools oder ein anderes, vergleichbares, für ähnliche Szenarien? Lassen Sie es uns wissen und zögern Sie nicht, mit uns in Kontakt zu treten!

Schreiben Sie einen Kommentar

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