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

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 Webinspektor greift auf den iPhone 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

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!

Leser schrieben dazu:

  • A. B. Jones

    Ich verstehe noch nicht ganz, ob man dann die Seite an sich ändern kann oder ob man nur lokal die Darstellung auf dem iOS Gerät ändert..

    • Sascha Diercks

      Tatsächlich lässt sich nach dem Verfahren nur die Darstellung im Browser simulieren. Die simulierten Anpassungen müssen nach dem Test auch in der Seite selbst erfolgen. Das Prinzip entspricht also einem Debugging im Desktopbrowser mit integriertem Webinspektor (Webkit), bzw. Firebug (Mozilla).

  • Thomas

    Der Artikel hat mir beim Einstieg ins Thema sehr geholfen.
    Schade, dass man auf diese Weise den Qeelltext und damit das Programm nicht editieren kann. Gibt es eine einfache Möglichleit HTM-Programme zu testen und zu bearbeiten?

  • Udo

    In den WebKit-Varianten unter Windows gibt es den Emulator auch. Allerdings ohne den schmückenden Rahmen, der das Gerät simuliert, dafür bietet der aber auch eine reiche Auswahl an Geräten, angefangen vom A wie Amazon Kindle – oder eben Apple iPhone in verschiedenen Generationen – Blackberry, Google, HTC, Nokia bis hin zu Samsung natürlich. Die dortige Auswahl der Optionen legt allerdings nahe: Nur die Bildschirmgröße, der User-Agent und die Sensoren werden emuliert, die aber für den Browser und die Geräte bzw. die dort möglichen Einsatzzwecke voll umfänglich, nämlich Touchscreen, Geolocation, Lagesensor.

    • Sascha Diercks

      Hallo Udo,
      danke für den Tipp. Chrome bietet in seinen Entwicklertools mittlerweile eine ähnliche Funktion. Der einfachste Weg, diese Funktion zu erreichen, ist aktuell folgender: Entwicklertools öffnen (STRG + ALT + I) und dann via Escape den zusätzlichen Bereich zu öffnen. Hier dann den Reiter „Emulation“ öffnen und das entsprechende Gerät wählen. Allerdings konnte ich schon Unterschiede zwischen Emulation und Simulation ausmachen. Letzten Endes sollte ein endgültiger Test meiner Meinung nach daher immer auf dem Geräte selbst erfolgen.

Ihre Meinung interessiert mich sehr: