iOS6: Remote Debugging

Mit dem kürzlich erschienen iOS6 wurde endlich eine vernünftige Remote-Debugging-Lösung geschaffen, um eine Website zur Laufzeit zu untersuchen (wie von Firebug oder Web-Inspector auf dem Desktop gewohnt).

Wie funktioniert das Remote-Debugging für iOS-Devices?

Ganz einfach: Man kann eine Website und deren Zustand auf dem mobilen Device untersuchen und ggf. auch manipulieren. Dazu wird der Web Inspector verwendet, der jedoch auf der Desktop-Version von Safari läuft. Man verknüpft ihn mit dem gewünschten Browserfenster auf dem iPhone, woraufhin die Inhalte der auf dem mobilen Device laufenden Website angezeigt werden. Deshalb auch Remote Debugging.

Bis iOS5 stand lediglich ein sehr einfache Konsole bereit, die jedoch keinerlei tiefergreifende Analysen ermöglichte. Da nun der Web Inspector verwendet wird, stehen einem somit alle gängige Werkzeuge zur Verfügung (HTML-Code, JavaScript, Konsole, Netzwerk-Requests, etc), die auch in der Desktop-Entwicklung zum Zug kommen.

Anleitung: iOS Remote Debugging

Neben den aktuellen Version der Browser (Safari 6 Desktop bzw. iOS 6 auf dem iPhone) sind folgende Vorbereitungen zu treffen:

1. Device per USB mit dem Rechner verbinden.
2. Desktop-Safari: Falls nicht bereits geschehen, das Entwickler-Menü aktivieren („Einstellungen > Erweitert”).
3. Auf dem iPhone die „Webinformationen” aktivieren (unter „Einstellungen > Safari > Erweitert”). Hinweis: Der Private-Modus von Mobile Safari darf nicht aktiviert sein.

Nun ist alles soweit vorbereitet, dass man auf dem iPhone die zu untersuchende Website öffnen kann. Anschließend findet man im Entwickler-Menü des Desktop-Safaris das angeschlossene iPhone samt allen weiteren vorhandenen Tabs. Falls man mehrere ähnliche Tabs offen haben sollte, erkannt man den richtigen daran, dass bei Mouseover des Menüeintrags die Website auf dem iPhone blau markiert wird.

Das war’s auch schon. Der Web Inspector öffnet sich und lässt sich wie gewohnt bedienen — mit dem Unterschied, dass das Frontend sich auf dem Device befindet. Selbst das Hervorheben von einzelnen HTML-Elemente beim Mouseover funktioniert.

Fazit: Ein deutliche Verbesserung im Vergleich zur äußerst einfach Web-Konsole in iOS5, da man nun erstmals vollen Zugriff auf die gerade geöffnete Website hat.