Google Chrome

Darstellung von Chrome-Webseiten auf Smartphones simulieren

07.06.2018 von Thomas Rieske
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.

Bildergalerie:
Google Chrome für Windows
Die Hilfsmittel für die Simulation können Sie über das Chrome-Einstellungsmenü (1) und Klick auf „Weitere Tools“ (2) und „Entwickler-Tools“ (3) öffnen. Schneller geht es mit der Tastenkombination F12 oder Strg+Umschalt+I.
Google Chrome für Windows
Links wird daraufhin eine Symbolleiste mit verschiedenen Optionen eingeblendet.
Google Chrome für Windows
Der Bildschirm teilt sich nun. In der rechten Hälfte finden Sie die Entwickler-Tools und klicken auf das Smartphone-Symbol. Als Tooltip erscheint „Toggle device toolbar“.
Google Chrome für Windows
Klicken Sie auf „Responsive“, um eine Auswahl von Geräten zu sehen, die Chrome für die mobile Anzeige der geladenen Webseite verwenden kann.
Google Chrome für Windows
Falls unter den acht per Default angezeigten Modellen nicht das gewünschte ist, klicken Sie auf „Edit“.
Google Chrome für Windows
Im folgenden Dialog können Sie mithilfe der Checkboxen weitere vorgegebene Modelle zur Anzeige im Menü auswählen oder ein benutzerdefiniertes Gerät über „Add custom device“ anlegen.
Google Chrome für Windows
Neben einem aussagekräftigen Gerätenamen tragen Sie die betreffende Auflösung und am besten auch den User Agent String ein. Letzteres finden Sie meiste über eine Internetrecherche oder direkt auf der Herstellerseite. Außerdem können Sie angeben, ob es sich um touchfähige Hardware handelt. Mit „Add“ speichern Sie Ihr Gerät.
Google Chrome für Windows
Anschließend sehen Sie das erstellte Modell ganz oben in der Liste. Die Checkbox ist aktiviert, sodass es sich direkt in der Symbolleiste im linken Fensterbereich auswählen lässt.
Google Chrome für Windows
Um eine Drosselung zu simulieren, wechseln Sie im Menü zu „Settings / Throttling“. Über den Button können Sie ein eigenes Profil anlegen.
Google Chrome für Windows
Geben Sie nun einen Namen für das Profil ein sowie einen Wert für den Download und Upload in KBit/s. Außerdem können Sie eine Angabe zur Latenz machen. Mit einem Klick auf „Add“ fügen Sie Ihr Profil hinzu und verlassen den Settings-Bereich wieder per Escape.
Google Chrome für Windows
Sie gelangen in das Hauptmenü der Entwickler-Tools zurück. Hier klicken Sie auf den Performance-Tab und anschließend auf den Pfeil neben „Network“. In der Liste können Sie jetzt Ihr Profil auswählen.
Google Chrome für Windows
Ihr aktuelles Profil erscheint auch in der Symbolleiste über der geladenen Webseite. Allerdings wird es nicht mit vollem Namen, sondern nur als „Custom“ angezeigt.
Google Chrome für Windows
Außerdem lässt sich unter „Performance / CPU“ eine Bremse für den Prozessor angeben. Hier stehen jedoch nur die Vorgaben „No throttling“, „4x slowdown“ und „6x slowdown“ zur Verfügung.
Google Chrome für Windows
Die relativen Angaben für das CPU-Throttling beziehen sich allerdings auf die Fähigkeiten Ihres Rechners, nicht die des Mobilgeräts. Die Architekturen weichen zu stark voneinander ab, als dass eine Emulation möglich wäre.

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)