Die Entwicklung für Mobilgeräte sollte genauso einfach sein wie die für Desktop-Computer. Wir haben intensiv an den Chrome-Entwicklertools gearbeitet, um Ihnen die Arbeit zu erleichtern. Nun ist es an der Zeit, einige neue Funktionen vorzustellen, die Ihre mobile Webentwicklung erheblich verbessern sollten. Zuerst die Fehlerbehebung per Fernzugriff und dann stellen wir die richtige mobile Emulation vor.
Bildschirm Ihres Geräts per Screencast auf den Desktop übertragen
Bisher musste man bei der Fehlerbehebung per Fernzugriff immer wieder den Blick zwischen dem Gerät und den Entwicklertools hin- und herschieben. Jetzt zeigt Screencast den Bildschirm deines Geräts direkt neben deinen Entwicklertools an. Es ist gut, sie zu sehen, aber die Interaktion damit ist noch besser:
- Klicks auf den Screencast werden in Tippen übersetzt und die entsprechenden Touch-Ereignisse werden auf dem Gerät ausgelöst.
- Element auf dem Gerät mit dem Desktop-Cursor prüfen
- Sie können Text über die Desktoptastatur eingeben. Alle Tastenanschläge werden an das Gerät gesendet. Das sparst du viel Zeit beim Tippen mit den Daumen.
- Du kannst auf der Seite scrollen, indem du sie mit dem Zeiger verschiebst oder über das Touchpad deines Laptops wischst.
In der vollständigen Dokumentation zum Screencast findest du all das und noch viel mehr, zum Beispiel durch Auseinander- und Zusammenziehen der Finger. Chrome unter Android Beta (m32) erforderlich.
Einfache Remote-Debugging
Vor 18 Monaten hat Chrome das richtige Remote-Debugging für WebKit-Browser eingeführt. Aber wenn man es damals schon ausprobiert hat, musste es mit einem Android SDK-Download von 400 MB, dem Hinzufügen der adb-Binärdatei zu $PATH und einigen magischen Befehlszeilen-Beschwörungen zu tun haben.
Wir freuen uns, euch mitteilen zu können, dass ihr all das vergessen könnt. Chrome kann jetzt nativ deine USB-Geräte erkennen und mit ihnen kommunizieren. Wir haben das adb-Protokoll direkt über USB in Chrome implementiert, sodass du ganz einfach zu Menu > Tools > Inspect Devices gehen und sofort deine Remote-Debugging-Sitzung starten kannst.
Dies funktioniert auf allen Plattformen hervorragend, einschließlich ChromeOS. Beachten Sie jedoch, dass Sie unter Windows zuerst die geeigneten USB-Treiber installieren müssen, um mit dem Gerät zu kommunizieren. Falls Sie dies noch nie gemacht haben, müssen Sie außerdem das USB-Debugging auf dem Gerät aktivieren und bestätigen, dass Sie Chrome für Android Beta verwenden. Vollständige Dokumentation lesen
Portweiterleitung für lokale Projekte
Sie entwickeln auf localhost:8000, aber Ihr Smartphone kann diese nicht erreichen. Also haben wir die Portweiterleitung
direkt in den Remote-Debugging-Workflow aufgenommen. So können Sie ganz einfach an Ihren vollständigen Projekten ohne Tunneling-Hacks arbeiten. Klicken Sie in about:inspect auf "Portweiterleitung", um festzulegen, welche Ports verfügbar sein sollen. Wenn alles in Ordnung ist, leuchten sie grün.
Mobile Emulation
Sie haben nicht immer die Geräte, die Sie auf Kompatibilität testen müssen, oder? Während das Remote-Debugging auf echten Geräten Ihnen das beste Gefühl in Bezug auf Leistung und Touch bietet, können Sie jetzt viele Geräteeigenschaften auf dem Desktop emulieren, was Zeit spart und die Iterationsschleife erheblich beschleunigt.
Bildschirmgröße, devicePixelRatio und <meta viewport> mit vollständiger Touch-Ereignissimulation emulieren
Wenn ihr die frühere Funktion „Gerätemesswerte“ schon einmal gesehen habt, ist jetzt ein enormes Upgrade verfügbar. Das Team hat hart daran gearbeitet, die mobile Emulation so nah wie möglich zu gestalten, was man auf echten Geräten sehen würde. WebKit-Browser verwalten beispielsweise einen komplexen Algorithmus zur automatischen Textgrößenanpassung, und tatsächlich hat jedes Gerät einen speziellen "Fudge-Faktor" für die automatische Schriftgrößenanpassung, der sich ändert, um den Text lesbar zu halten. 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 beinahe 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 Ihre Ansicht so an, dass Sie sich ein detailliertes DPI-Szenario ansehen können. Darüber hinaus können window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) usw. deine Einstellungen widerspiegeln. So kannst du sehen, wie sich deine App anpasst, und verschiedene dpi-spezifische Assets laden.
Die Geräteemulation erstreckt sich nicht auf alle Browserfunktionen oder -fehler. WebGL funktioniert also während der Emulation von iOS weiterhin und Sie vermeiden den Fehler beim Ausrichtungszoom unter iOS 5. Diese Schwankungen können Sie direkt auf dem Gerät erleben.
Richtige Emulation von <meta viewport> (und @viewport)
Das Verhalten von width=device-width und minimum-scale:1.0 wurde bisher als reines Gerätespiel getestet. Jetzt können Sie schnell verschiedene Darstellungsbereiche testen und beobachten, wie sie gerendert werden.
Simulierte Touch-Ereignisse
Mit der Einstellung Touchscreen emulieren wird sichergestellt, dass Ihre Klicks als touchstart interpretiert werden usw. Außerdem funktionieren synthetische Ereignisse wie Zoomen, Scrollen und Schwenken. shiftZiehe oder shift+scrolle dazu, um den Inhalt zu vergrößern. So haben Sie einen hervorragenden Überblick über Inhalte, die über den Darstellungsbereich hinaus skaliert werden.
Schließlich können Sie mithilfe der Stand-bys von User-Agent-Spoofing (sowohl auf Anfrageheader- als auch auf window.navigator-Ebene), Standortbestimmung und Orientierungsemulation die volle Funktionalität Ihres Geräts erkunden.
Gerätevoreinstellungen
Mit den Emulationsvoreinstellungen können Sie ein Smartphone oder Tablet auswählen und die richtige Bildschirmgröße (dPR und UA) für dieses Gerät anwenden. Außerdem werden vollständige Touch-Ereignisse und der Darstellungsbereich emuliert. Du kannst bestimmte Voreinstellungen ausprobieren oder diese Eigenschaften ganz einfach einzeln anpassen.
Unter devtools.chrome.com finden Sie die vollständige Dokumentation zu Mobile Emulation mit Entwicklertools.
Demo
Wenn Sie all diese Funktionen in Aktion sehen möchten, sehen Sie sich mein 23-minütiges Gespräch vom Chrome Dev Summit zu den Entwicklertools für Mobilgeräte an: