Chrome-Entwicklertools mobil: Touch-Events und Geolocation am Desktop emulieren
Mit den Chrome-Entwicklertools stellt Google ein umfangreiches Werkzeug für seinen Browser zur Verfügung, das einen bei der Umsetzung von Webprojekten unterstützt. Vor recht kurzer Zeit stellten wir den sehr gelungenen Online-Kurs zu den DevTools vor, der nach wie vor kostenfrei zur Verfügung steht. Heute möchte ich Ihren Blick auf die interessanten Möglichkeiten lenken, die die Tools für die Entwicklung mobiler Anwendungen bieten und die einem den ständigen Wechsel zwischen Desktop- und Mobilgerät ersparen.
„Overrides“ in den Entwicklertools
Die Entwicklertools sind Bestandteil des Chrome-Browsers und werden über das Menü („Tools > Entwicklertools“) aufgerufen. Sodann erscheinen sie am unteren Rand des Browserfensters. Neben den unterschiedlichen Reitern gibt es rechts unten ein Zahnrad, über das man die Einstellungen erreicht.
„Overrides“ in den Entwicklertools
Dort findet man den Bereich „Overrides“, mit denen man bestimmte vom Browser festgelegte Eigenschaften überschreiben kann. Dazu gehört unter anderem auch die Möglichkeit, einen anderen User-Agent auszugeben oder die Seite als Druckansicht darstellen zu lassen. Aber auch speziell für Mobilgeräte vorgesehene Funktionen lassen sich emulieren.
Unterschiedliche Auflösungen einstellen
Wenn es darum geht, ein responsives Layout zu testen, reicht es ja in der Regel, das Browserfenster zu vergrößern oder zu verkleinern. Die Angabe individueller Auflösungen in den „Overrides“ ist daher nicht unbedingt nötig. Allerdings ermöglicht die Einstellung in den „Overrides“ die Auflösung per Mausklick komfortabel in fest definierte Werte zu verändern.
Touch-Events emulieren
Besonders interessant ist die Möglichkeit, Touch-Events zu emulieren. Ist die Einstellung aktiviert, interpretiert Chrome Bewegungen mit gedrückter Maus als Gesten. Allerdings beschränkt sich die Emulation von Gesten auf aktive Touch-Events, die entsprechend mit ontouchstart gestartet werden.
Außerhalb der Touch-Events bleibt das Mausverhalten, wie man es vom Desktop-Browser gewohnt ist. Das betrifft beispielsweise Hover-Effekte und das Scrollen.
Geolocation und Geräteorientierung „überschreiben“
Ebenfalls interessant ist die Möglichkeit, eine Positionsangabe zu emulieren, indem man eine Position manuell per Längen- und Breitengrad angibt. Wird per JavaScript die aktuelle Position abgefragt, gibt der Browser die manuell hinterlegte Angabe aus.
Ähnlich funktioniert es mit der Emulation der Geräteorientierung. Auch diese lässt sich per JavaScript auslesen. Die drei Werte für die horizontale und vertikale Neigung sowie die Drehung können ebenfalls manuell angegeben.
Fazit: Gerade für das Testen mobiler Anwendungen stellen die „Override“-Funktionen der Google-Entwicklertools eine große Arbeitserleichterung dar. Per Mausklick werden unterschiedliche Emulationen einfach hinzugeschaltet.
Links zum Beitrag
- Pflichtprogramm für Web-Developer: Kostenloser Online-Lehrgang zu Chromes DevTools von Code School | Dr. Web Magazin
(dpe)
🥰 Mit freundlicher Unterstützung von:
