Google Chrome

Darstellung von Chrome-Webseiten auf Smartphones simulieren

07.06.2018
Von 
Thomas Rieske arbeitet seit Oktober 2002 als freiberuflicher IT-Fachjournalist und Autor. Zu den Themenschwerpunkten des Diplom-Übersetzers zählen unter anderem Computersicherheit, Office-Anwendungen und Telekommunikation.
Immer mehr Nutzer greifen mit mobilen Geräten auf Websites zu. Viele Entwickler stehen deshalb vor dem Problem, wie die von ihnen programmierten Seiten auf unterschiedlichen Geräten und unter verschiedenen Rahmenbedingungen aussehen. Chrome hilft mit einer Reihe von Optionen weiter.

Entwickler-Tools in Chrome aktivieren

Mit dem Chrome-Browser lassen sich verschiedene Geräte emulieren. Aktivieren Sie dazu bei geladener Webseite die Entwickler-Tools, entweder über das Einstellungsmenü oben rechts neben der Adressleiste oder schneller mit den Hotkeys F12 beziehungsweise Strg+Umschalt+I. Dann klicken Sie im nun geteilten Bildschirm rechts auf das Symbol für Mobilgeräte. Wenn Sie die Maus darüber bewegen, erscheint als Tooltip Toggle device toolbar.

Gerät für die Simulation von Webseiten definieren

Im linken Fensterbereich blendet Chrome daraufhin eine Symbolleiste ein. Wenn Sie auf Responsive klicken, lässt sich aus der Pulldown-Liste ein Gerät für die Simulation auswählen. Standardmäßig erscheinen acht Modelle. Über den Edit-Befehl können Sie weitere vordefinierte Typen hinzufügen, zum Beispiel Blackberrys, diverse Nexus-Smartphones oder die Lumia-Serie von Microsoft, aber auch mit einem Klick auf Add custom device eigene Definitionen erstellen. Dazu sollten Sie neben der Auflösung des Gerätes auch den User Agent String kennen. Außerdem können Sie angeben, ob es sich um touchfähige Hardware handelt.

Eigene Profile anlegen

Im selben Menü unterSettings / Throttlinglassen sich auch eigene Profile anlegen, um eine Drosselung zu simulieren. Wenn Sie etwa sehen wollen, wie schnell eine Seite lädt, wenn der Anbieter die Geschwindigkeit nach Aufbrauchen des mobilen Datenkontingents reduziert, ist das die richtige Stellschraube. Klicken Sie aufAdd custom profile,vergeben einen Profilnamen und tragen die gewünschten Werte für den Upload und Download in KBit/s und für die Latenz in Millisekunden (ms) ein.

Neues Profil aktivieren

Nachdem Sie Ihr neu erstelltes Profil über die SchaltflächeAddgespeichert haben, schließen Sie den Einstellungsbereich per Escape-Taste. Zurück im Hauptmenü der Entwickler-Tools wählen Sie in der obersten Zeile den Performance-Tab. Anschließend klicken Sie nebenNetworkauf den nach unten zeigenden Pfeil und haben jetzt die Möglichkeit, aus der Liste im Custom-Bereich Ihr Profil zu selektieren.

Achtung bei den Performance-Einstellungen

Außerdem lässt sich unter Performance / CPUeine Bremse für den Prozessor angeben. Hier stehen allerdings nur die Google-VorgabenNo throttling,4x slowdownund6x slowdownzur Verfügung. Diese relativen Angaben haben jedoch nur begrenzte Aussagekraft, denn sie beziehen sich auf die Fähigkeiten Ihres Rechners, nicht auf die des mobilen Geräts! Dessen CPU können die Entwickler-Tools auf Desktop- und Laptop-Computern nicht nachstellen, da sich die Hardware-Architekturen grundlegend voneinander unterscheiden. (hal)