HTML5 Mobile

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).

Remote Debugging: Der Web Inspector auf dem Rechner zeigt die Inhalte von Mobile Safari

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.
Menü auf dem iPhone, um das Remote Debugging zu aktivieren

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.

Die einzelnen Tabs des Devices (links) und Hervorhebung bei Mouseover des gerade geöffneten Tabs (rechts)

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.

7 Kommentare zu: iOS6: Remote Debugging

Marvin brach
26. September 2012, 09:20

Sollte das auch mit der Windows-Version des Safari funktionieren?

flo
26. September 2012, 09:54

Für Windows gibt es Safari 6 meines Wissens noch nicht. Insofern: nein.

Marvin brach
26. September 2012, 11:52

Ach verdammt, komplett den Hinweis auf die benötigte Desktop-Version überlesen. Danke fürs daraufstoßen!

Andreas Cichocki
4. Oktober 2012, 10:32

Danke, wollte das iPad verbinden und auch da funktioniert es super wenn die “Webinformationen” aktiviert werden.

Emanuel B.
26. Oktober 2012, 08:56

Hey Marvin,

gibts dich auch noch :)

Garib
1. Juni 2014, 13:18

Hallo leider habe ich kein safari auf dem pc daher weiß ich leider nicht wie es zu i-phone 5 verbinden soll

;(

Hinterlasse eine Antwort

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

*

*