Denis Potschien 17. April 2013

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.

chromeentwicklertools

„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.

chromeentwicklertools_override
„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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.