Die Entwicklung für Mobilgeräte sollte genauso einfach sein wie für Desktop-Computer. Wir haben hart an den Chrome-Entwicklertools gearbeitet, um die Arbeit für Sie zu vereinfachen. Nun möchten wir Ihnen einige neue Funktionen vorstellen, mit denen Sie Ihre mobile Webentwicklung erheblich verbessern können. Zuerst die Fehlerbehebung per Fernzugriff und anschließend die ordnungsgemäße Emulation für Mobilgeräte.
Screencast des Bildschirms Ihres Geräts auf den Desktop
Bisher mussten Sie bei der Fehlerbehebung per Remote-Zugriff zwischen Ihrem Gerät und Ihren Entwicklertools hin und her schauen. Jetzt zeigt Screencast den Bildschirm Ihres Geräts direkt neben den Entwicklertools an. Es ist gut zu sehen, aber noch besser zu interagieren:
- Klicks auf den Screencast werden in Fingertipps umgewandelt und die entsprechenden Touch-Ereignisse werden auf dem Gerät ausgelöst.
- Untersuchen Sie Elemente auf Ihrem Gerät mit dem Desktopzeiger.
- Sie können Text auf Ihrer Desktop-Tastatur eingeben – alle Tastenanschläge werden an das Gerät gesendet. Mit dem Daumen sparen Sie enorm viel Zeit.
- Scrollen Sie durch die Seite, indem Sie sie mit dem Zeiger oder einfach über das Touchpad Ihres Laptops ziehen.
Diese und weitere Funktionen werden in der vollständigen Dokumentation zu Screencasts erfasst, z. B. durch Auseinander- und Zusammenziehen der Finger. Chrome unter Android Beta (m32) erforderlich.
Einfache Fehlerbehebung per Fernzugriff
Vor 18 Monaten wurde in Chrome ein ordnungsgemäßes Remote-Debugging für WebKit-Browser eingeführt. Wenn Sie es aber damals ausprobiert haben, mussten Sie ein Android SDK-Download von 400 MB ausführen, das adb-Binärprogramm zu Ihrem $PATH hinzufügen und einige magische Befehlszeilenbefehle hinzufügen.
Ab sofort kannst du all das vergessen. Chrome kann jetzt deine USB-Geräte nativ finden und mit ihnen kommunizieren. Wir haben das adb-Protokoll direkt über USB in Chrome implementiert, sodass du ganz einfach zu Menu > Tools > Inspect Devices wechseln und sofort deine Remote-Debugging-Sitzung starten kannst.
Das funktioniert auf allen Plattformen, einschließlich Chrome OS. Unter Windows müssen Sie jedoch zuerst die richtigen USB-Treiber installieren, um mit dem Gerät kommunizieren zu können. Wenn Sie es noch nie ausprobiert haben, müssen Sie außerdem USB-Debugging auf dem Gerät aktivieren und sicherstellen, dass Sie Chrome für Android Beta verwenden. Vollständige Dokumentation
Portweiterleitung für lokale Projekte
Sie entwickeln mit localhost:8000, aber Ihr Smartphone kann darauf nicht zugreifen. Also haben wir die Portweiterleitung direkt zum Remote-Debugging-Workflow hinzugefügt. Jetzt kannst du ganz einfach und ohne Tunneling-Hacks an deinen ganzen Projekten arbeiten. Klicken Sie bei about:inspect auf "Portweiterleitung", um die Ports festzulegen, die verfügbar sein sollen. Wenn alles bereit ist, leuchten sie grün auf.
Mobile Emulation
Sie haben nicht immer die Geräte, die Sie auf Kompatibilität testen müssen, oder? Mit Remote-Debugging auf echten Geräten haben Sie ein optimales Gefühl in Bezug auf Leistung und Touchscreen. Jetzt können Sie viele Geräteeigenschaften auf einem Desktop-Computer realistisch emulieren, um Zeit zu sparen und Ihre Iterationsschleife deutlich schneller zu machen.
Bildschirmgröße, devicePixelRatio und <meta viewport> mit vollständiger Touch-Ereignissimulation emulieren
Die bisherige Funktion „Gerätemesswerte“ bietet jetzt deutliche Verbesserungen. Das Team hat hart daran gearbeitet, mit der neuen Emulation für Mobilgeräte nahezu echt zu sein, was auf echten Geräten zu sehen ist. Beispielsweise verfügen die WebKit-Browser über einen komplexen Algorithmus zur automatischen Größenanpassung von Text. Tatsächlich hat jedes Gerät einen speziellen „Fudge-Faktor“ für die automatische Größenanpassung des Textes, der sich ändert, damit der Text lesbar bleibt. Im Emulationsmodus können Sie überprüfen, ob dieses Verhalten angewendet wird, und die Ergebnisse sehen.
Pixel-Verhältnis des Geräts
Bisher war es fast unmöglich zu sehen, was ein Hi-DPI-Gerät auf einem Low-DPI-Gerät anzeigt. Jetzt passt die dPR-Emulation in den Entwicklertools deine Ansicht an, damit du ein tiefes DPI-Szenario heranzoomen kannst. Außerdem werden window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) usw. Ihre Einstellung widerspiegeln. So können Sie sehen, wie sich Ihre App anpasst, und verschiedene dpi-spezifische Assets laden.
Die Geräteemulation erstreckt sich nicht auf alle Browserfunktionen oder Programmfehler. Während der Emulierung von iOS funktioniert WebGL also weiterhin und der Fehler beim Zoomen bei der Ausrichtung in iOS 5 wird nicht auftreten. Um diese Schwankungen zu erleben, gehen Sie zum Gerät.
Richtige Emulation von <meta viewport> (und @viewport)
In der Vergangenheit wurde das Verhalten von width=device-width und minimum-scale:1.0 getestet, was in der Vergangenheit nur auf Geräte möglich war. Jetzt kannst du schnell verschiedene Darstellungsbereiche ausprobieren und beobachten, wie sie gerendert werden.
Simulation des Touch-Ereignisses
Die Einstellung Touchscreen emulieren sorgt dafür, dass Ihre Klicks als touchstart interpretiert werden usw. Außerdem funktionieren synthetische Ereignisse wie Zoomen, Scrollen und Schwenken. Zum Heranzoomen auseinander- und zusammenziehen, shift+ziehen Sie die Finger zusammen oder shift+scrollen Sie, um den Inhalt zu vergrößern. Sie erhalten eine großartige Ansicht der Inhalte, die über den Darstellungsbereich hinaus skaliert werden.
Schließlich können Sie anhand Ihrer Standbys für User-Agent-Spoofing (sowohl auf der Anfrage-Header- als auch auf window.navigator-Ebene), der Standortbestimmung und der Ausrichtungsemulation die volle Funktionalität Ihres Geräts testen.
Gerätevoreinstellungen
Mit den Voreinstellungen für die Emulation können Sie ein Smartphone oder Tablet auswählen und die richtige Bildschirmgröße (dPR, UA) für dieses Gerät sowie vollständige Touch-Ereignisse und emulierte Darstellungsbereich abrufen. Du kannst bestimmte Voreinstellungen ausprobieren oder die Eigenschaften einzeln anpassen.
Unter devtools.chrome.com finden Sie die vollständige Dokumentation zur Mobile-Emulation mit den Entwicklertools.
Demo
Eine vollständige Demo aller dieser Funktionen findet ihr in meinem 23-minütigen Vortrag vom Chrome Dev Summit zu den Entwicklertools für Mobilgeräte: