Zurück zur Übersicht

Emulation von mobilen Endgeräten mit den Chrome-Entwicklerwerkzeugen

Die Entwicklerwerkzeuge des Chrome-Browsers sind bekannt und werden in vielen Anleitungen beschrieben. Was bislang dabei etwas unterging (meiner Meinung nach), ist die Möglichkeit, mit Hilfe dieser Werkzeuge ein Endgerät zu emulieren, d.h. den Browser anzuweisen, sich im Grunde wie ein bestimmtes Endgerät mit einer festgelegten Bildschirmauflösung und einem entsprechenden User Agent zu verhalten.

Die Entwicklertools öffnet man über Tools->Entwicklertools oder mit der Tastenkombination Umschalt+Strg+I

Für Entwickler, die mit responsivem Design in Berührung kommen oder sogar die meisten ihrer Projekte mit Rücksicht auf mobile Endgeräte umsetzen, ist diese Möglichkeit von Chrome eine sehr große Hilfe.

Ich selber verwende Chromium, dies ist quasi die Linux-Variante von Googles Chrome, basierend auf demselben Quellcode, aber u.a. ohne die „Schnüffel-Software“. Für all meine responsiven Projekte verwende ich das Chromium-Entwicklerfenster. Dieses hat sich mit der heutigen Aktualisierung auf die neue Browserversion etwas verändert und sieht nun so aus:

chromium1

Im oberen Bereich des Fensters finden wir wie immer die acht Entwicklungs- und Analysewerkzeuge, darunter jedoch wird nun standardmäßig das Fenster mit den drei Optionen eingeblendet, welches vorher nur über ein kleines Icon in der unteren rechten Ecke aufrufbar war und daher vermutlich von vielen übersehen wurde.

Uns interessiert vor allem die Option Emulation. Die Bereiche sind selbsterklärend und ermöglichen es uns mit wenigen Klicks, z.B. ein Google Nexus 10 mit Touch-Funktionalität zu emulieren. Auflösungen lassen sich auch manuell eintragen und somit die Umbrüche in unseren CSS-Dateien testen. Alles in allem ein äußerst brauchbares Werkzeug.

Die hier beschriebene Herangehensweise ist natürlich keine wirkliche Emulation, da der zur Darstellung verwendete Browser immer der Chrome ist. Abweichungen in der Darstellung in anderen (mobilen) Browsern können so nicht entdeckt werden. Hierfür kann man jedoch auch auf Dienste zurückgreifen, die es einem erlauben, ohne Installations-Marathon seine Applikationen auf diversen Betriebssystemen und Browsern zu testen. Anbieter sind zum Beispiel perfectomobile.com oder saucelabs.com

Schreibe einen Kommentar