Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 17. April 2013

Chrome-Entwicklertools mobil: Touch-Events und Geolocation am Desktop emulieren

Mit den Chrome-Entwicklertools stellt Google ein umfang­rei­ches Werkzeug für sei­nen Browser zur Verfügung, das einen bei der Umsetzung von Webprojekten unter­stützt. Vor recht kur­zer Zeit stell­ten wir den sehr gelun­ge­nen Online-Kurs zu den DevTools vor, der nach wie vor kos­ten­frei zur Verfügung steht. Heute möch­te ich Ihren Blick auf die inter­es­san­ten Möglichkeiten len­ken, die die Tools für die Entwicklung mobi­ler Anwendungen bie­ten und die einem den stän­di­gen Wechsel zwi­schen Desktop- und Mobilgerät erspa­ren.

chromeentwicklertools

„Overrides“ in den Entwicklertools

Die Entwicklertools sind Bestandteil des Chrome-Browsers und wer­den über das Menü („Tools > Entwicklertools“) auf­ge­ru­fen. Sodann erschei­nen sie am unte­ren Rand des Browserfensters. Neben den unter­schied­li­chen Reitern gibt es rechts unten ein Zahnrad, über das man die Einstellungen erreicht.

chromeentwicklertools_override
„Overrides“ in den Entwicklertools

Dort fin­det man den Bereich „Overrides“, mit denen man bestimm­te vom Browser fest­ge­leg­te Eigenschaften über­schrei­ben kann. Dazu gehört unter ande­rem auch die Möglichkeit, einen ande­ren User-Agent aus­zu­ge­ben oder die Seite als Druckansicht dar­stel­len zu las­sen. Aber auch spe­zi­ell für Mobilgeräte vor­ge­se­he­ne Funktionen las­sen sich emu­lie­ren.

Unterschiedliche Auflösungen einstellen

Wenn es dar­um geht, ein respon­si­ves Layout zu tes­ten, reicht es ja in der Regel, das Browserfenster zu ver­grö­ßern oder zu ver­klei­nern. Die Angabe indi­vi­du­el­ler Auflösungen in den „Overrides“ ist daher nicht unbe­dingt nötig. Allerdings ermög­licht die Einstellung in den „Overrides“ die Auflösung per Mausklick kom­for­ta­bel in fest defi­nier­te Werte zu ver­än­dern.

Touch-Events emulieren

Besonders inter­es­sant ist die Möglichkeit, Touch-Events zu emu­lie­ren. Ist die Einstellung akti­viert, inter­pre­tiert Chrome Bewegungen mit gedrück­ter Maus als Gesten. Allerdings beschränkt sich die Emulation von Gesten auf akti­ve Touch-Events, die ent­spre­chend mit ontouchstart gestar­tet wer­den.

Außerhalb der Touch-Events bleibt das Mausverhalten, wie man es vom Desktop-Browser gewohnt ist. Das betrifft bei­spiels­wei­se Hover-Effekte und das Scrollen.

Geolocation und Geräteorientierung „überschreiben“

Ebenfalls inter­es­sant ist die Möglichkeit, eine Positionsangabe zu emu­lie­ren, indem man eine Position manu­ell per Längen- und Breitengrad angibt. Wird per JavaScript die aktu­el­le Position abge­fragt, gibt der Browser die manu­ell hin­ter­leg­te Angabe aus.

Ähnlich funk­tio­niert es mit der Emulation der Geräteorientierung. Auch die­se lässt sich per JavaScript aus­le­sen. Die drei Werte für die hori­zon­ta­le und ver­ti­ka­le Neigung sowie die Drehung kön­nen eben­falls manu­ell ange­ge­ben.

Fazit: Gerade für das Testen mobi­ler Anwendungen stel­len die „Override“-Funktionen der Google-Entwicklertools eine gro­ße Arbeitserleichterung dar. Per Mausklick wer­den unter­schied­li­che Emulationen ein­fach hin­zu­ge­schal­tet.

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.

Schreibe einen Kommentar

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