iOS 6 Debugging für mobile Websites

Seit gestern (19.9.) ist das neue iOS 6 veröffentlicht. Nach langem Download habe ich es installiert und mir als erstes die für Webentwickler spannenden “Webinformationen” ausprobiert, die uns das Debuggen über die Safari-Entwicklertools auf iOS 6 Geräten ermöglichen und somit die Entwicklung von Responsive Design und mobilen Websites vereinfachen.

Debuggen unter iOS 6

Installation

Um das Debugging zu nutzen, müsst Ihr es zunächst auf Eurem iOS Device (iOS 6 natürlich vorausgesetzt) aktiveren. Dieses macht Ihr unter der “App Einstellungen” > Safari > Erweitert > Webinformationen.

Aktivierung "Webinformationen" unter iOS 6

In Eurem Safari auf Eurem Mac müsst Ihr, soweit noch nicht geschehen, zunächst die Entwicklertools aktivieren. Safari > Einstellungen > Erweitert > “Menü Entwickler in der Menüleiste zeigen” aktivieren.

Nun verbindet Ihr Euer iOS Device mit einem Kabel (!?) mit dem Mac und könnt in den Entwicklertools Euer Gerät auswählen. Soweit Ihr auf dem iOS Safari eine Website geöffnet habt, wird diese angezeigt. Wenn Ihr die Seite auswählt, könnt Ihr mit dem Debuggen beginnen.

Als Alternative (ob besser oder schlechter kann ich jetzt noch nicht beurteilen) bietet sich Adobe Shadow an, dass ich in einem anderen Blogpost schon vorgestellt habe. Shadow unterstützt u.a. auch das Debuggen auf Android Devices.