Mobile Websites unter Safari debuggen

Wir leben in einer Zeit, in der Kunden Websites nicht mehr ausschließlich mit dem heimischen PC besuchen und nutzen. Dieser Umstand führt dazu, dass wir Websites so entwickeln (müssen/sollten), dass sie auf mehreren Geräten laufen können.

Hier gibt es verschiedene Techniken, wie Responsive Design oder eigene Templatesets für verschiedene Geräteklassen. Egal, welche Lösung wir bevorzugen – wir müssen die Seite testen, um sicherzustellen, dass der Kunde sie problemlos nutzen kann. Seit Safari 6.0 lassen sich Websites auf dem iPhone testen und zwar unter Zuhilfenahme des in Safari integrierten Webinspektors. Wird auf dem iPhone die mobile Ansicht der Website nicht korrekt dargestellt können wir über den Webinspektor live an der Seite arbeiten und das Problem lösen. Das geht deutlich schneller, als zu versuchen, den Fehler lokal zu beheben, die Datei auf den Server zu laden und die Seite erneut aufzurufen. Im schlimmsten Fall wiederholen wir diese Prozedur für den gleichen Fehler mehrmals.

Mit Safari 6.0 geht das nun deutlich einfacher. Was genau die Vorraussetzung sind, und wie diese Testumgebung eingerichtet werden kann, beschreibe ich in diesem Artikel.

Zwei Möglichkeiten des Debugging

Es gibt zwei Wege, mobile Websites zu testen. Sowohl über den iPhone Simulator als auch über ein echtes iOS-Gerät!

Benötigt wird für beide Fälle der Safari in der Version von mindestens 6.0! Außerdem ist ein im Safari aktivierter Entwickler-Modus Voraussetzung!

Dieser lässt sich in Safari > Einstellungen unter der dem Punkt Erweitert einschalten! Einfach den Haken setzen und in der Menüleiste taucht der Punkt Entwickler auf!

Der Entwicklermodus lässt sich aktiverien in Einstellungen - Erweitert
Der Entwicklermodus lässt sich aktiverien in Einstellungen - Erweitert

Debbuging mit dem iOS-Simulator und dem Webinspektor

Unter OS X gibt es seit einiger Zeit die Möglichkeit, Websites und Apps lokal, d.h. in einem Simulator zu testen. Der iOS-Simulator ist Bestandteil der kostenlosen Developer-Tools und kann hier aus dem Mac App Store geladen werden.

Öffnen wir nun eine beliebige Website im iOS-Simulator, haben wir im Safari-Browser (die Desktop-Version) die Möglichkeit über Entwickler > iPhone Simulator > … mit dem Webinspektor auf die Seite im iPhone Simulator zuzugreifen und diese zu manipulieren!

Der Webinspector greift auf den Simulator zu
Der Webinspector greift auf den Simulator zu

Remote debugging mit dem Webinspektor und dem iPhone

Ähnlich einfach ist es, auf Websites auf einem echten iPhone zuzugreifen. Voraussetzung hierfür ist, dass das iPhone via USB mit dem Rechner verbunden ist. Außerdem muss auf dem iPhone die Option Webinformationen aktiviert werden. Dies erfordert mindestens iOS 6.

Die Webinformationen lassen sich folgendermaßen aktiveren: Einstellungen > Safari > Erweitert

Aktivieren Sie die Webinformationen um Safari den Zugriff auf das iPhone zu gewähren
Aktivieren Sie die Webinformationen um Safari den Zugriff auf das iPhone zu gewähren

Ist das iPhone mit dem Rechner verbunden, können wir nun im Desktop-Safari über Entwickler > Name des iPhones > … auf die Website zugreifen und diese bearbeiten!

Nur auf dem Mac

Der iPhone Simulator setzt schon immer den Macintosh als Plattform voraus, und auch Safari 6.x ist noch für keine andere Plattform verfügbar. Es ist leider sehr wahrscheinlich, dass dies auch zukünftig so bleiben wird!

Mit der Entwicklung dieser Website habe ich begonnen, ein Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.
Wirf einen Blick darauf