Die Entwicklung für Mobilgeräte sollte genauso einfach sein wie die Entwicklung für Computer. Wir haben hart daran gearbeitet, die Chrome DevTools für Sie zu verbessern. Jetzt ist es an der Zeit, einige neue Funktionen zu enthüllen, die die Entwicklung von Websites für Mobilgeräte erheblich verbessern sollten. Zuerst das Remote-Debugging und dann die richtige mobile Emulation.
Bildschirm Ihres Geräts auf den Computer streamen
Bisher mussten Sie beim Remote-Debugging den Blick zwischen Ihrem Gerät und Ihren DevTools hin- und herwechseln. Der Screencast zeigt jetzt den Bildschirm Ihres Geräts direkt neben den DevTools an. Es ist gut, sie zu sehen, aber noch besser ist es, mit ihnen zu interagieren:
- Klicks im Screencast werden in Tippaktionen umgewandelt und die entsprechenden Touch-Ereignisse werden auf dem Gerät ausgelöst.
- Element auf Ihrem Gerät mit dem Mauszeiger auf dem Computer prüfen
- Geben Sie die Eingabe auf der Tastatur Ihres Computers ein. Alle Tastenanschläge werden an das Gerät gesendet. Das spart viel Zeit im Vergleich zum Tippen mit den Daumen.
- Scrollen Sie auf der Seite, indem Sie den Cursor darauf bewegen oder einfach über das Touchpad Ihres Laptops wischen.
In der vollständigen Dokumentation zur Bildschirmaufnahme finden Sie weitere Informationen, z. B. zum Zoomen per Pinch-Geste. Chrome für Android Beta (m32) erforderlich.
Einfache Remote-Fehlerbehebung
Vor 18 Monaten hat Chrome eine richtige Remote-Fehlerbehebung für WebKit-Browser eingeführt. Wenn Sie es damals ausprobiert haben, mussten Sie jedoch ein 400 MB großes Android SDK herunterladen, die adb-Binärdatei Ihrem $PATH hinzufügen und einige magische Befehlszeilen ausführen.
Jetzt können Sie all das vergessen. Chrome kann jetzt nativ Ihre über USB verbundenen Geräte erkennen und mit ihnen kommunizieren. Wir haben das adb-Protokoll direkt über USB in Chrome implementiert. Sie können also ganz einfach Menu > Tools > Inspect Devices aufrufen und sofort mit der Remote-Debugging-Sitzung beginnen.
Das funktioniert auf allen Plattformen, einschließlich ChromeOS. Beachten Sie jedoch, dass Sie unter Windows zuerst die richtigen USB-Treiber installieren müssen, um mit dem Gerät kommunizieren zu können. Wenn Sie es noch nie zuvor versucht haben, müssen Sie außerdem das USB-Debugging auf dem Gerät aktivieren und bestätigen, dass Sie Chrome for Android Beta verwenden. Vollständige Dokumentation lesen
Portweiterleitung für lokale Projekte
Sie entwickeln auf localhost:8000, aber Ihr Smartphone kann diese Adresse nicht erreichen. Deshalb haben wir die Portweiterleitung direkt in den Remote-Debugging-Workflow aufgenommen. Jetzt können Sie ganz einfach an Ihren vollständigen Projekten arbeiten, ohne Tunneling-Hacks. Klicke auf about:inspect und dann auf „Portweiterleitung“, um festzulegen, welche Ports verfügbar sein sollen. Sie leuchten grün, wenn sie eingerichtet sind.
Mobilemulation
Sie haben nicht immer die Geräte, die Sie auf Kompatibilität testen müssen, oder? Die Remote-Fehlerbehebung auf echten Geräten gibt Ihnen zwar das beste Gefühl für Leistung und Touch, aber Sie können jetzt viele Gerätemerkmale auf dem Computer realistisch emulieren. So sparen Sie Zeit und können Ihre Iterationsschleife viel schneller durchlaufen.
Bildschirmgröße, devicePixelRatio und <meta viewport> mit vollständiger Touch-Ereignissimulation emulieren
Wenn Sie die vorherige Funktion „Gerätemesswerte“ bereits kennen, ist die jetzt verfügbare Funktion ein großer Fortschritt. Das Team hat hart daran gearbeitet, dass die neue mobile Emulation eine nahezu realistische Darstellung dessen bietet, was Sie auf echten Geräten sehen würden. WebKit-Browser verwenden beispielsweise einen komplexen Algorithmus für die automatische Textgrößenänderung. Tatsächlich hat jedes Gerät einen bestimmten „Fudge-Faktor“ für die automatische Textgrößenänderung, der sich ändert, um die Lesbarkeit des Textes zu verbessern. Im Emulationsmodus können Sie prü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 auf einem Hi-DPI-Gerät auf einem Low-DPI-Gerät angezeigt wird. Die dPR-Emulation in DevTools passt die Ansicht jetzt so an, dass Sie in ein Szenario mit niedriger Pixeldichte hineinzoomen können. Außerdem sollten window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) usw. Ihre Einstellung widerspiegeln, damit Sie sehen können, wie sich Ihre App anpasst, einschließlich des Ladens verschiedener dpi-spezifischer Assets.
Die Geräteemulation erstreckt sich nicht auf Browserfunktionen oder -fehler. Wenn Sie also iOS emulieren, funktioniert WebGL weiterhin und Sie werden nicht auf den Fehler beim Zoomen der Ausrichtung in iOS 5 stoßen. Um diese Unterschiede zu sehen, rufen Sie das Gerät auf.
Richtige Emulation von <meta viewport> (und @viewport)
Bisher war es nur auf Geräten möglich, das Verhalten von width=device-width und minimum-scale:1.0 zu testen. Jetzt können Sie schnell verschiedene Ansichten ausprobieren und beobachten, wie sie gerendert werden.
Touch-Ereignis-Simulation
Mit der Einstellung Touchscreen emulieren werden Ihre Klicks als touchstart usw. interpretiert. Außerdem funktionieren synthetische Ereignisse wie Zoomen, Scrollen und Schwenken. Wenn Sie heranzoomen möchten, halten Sie einfach die Taste shift gedrückt und ziehen Sie den Inhalt oder scrollen Sie mit der Maus, um heranzuzoomen.shift Sie erhalten einen guten Überblick über die Inhaltsskalierung über den Darstellungsbereich hinaus.
Mit den bewährten Methoden wie User-Agent-Spoofing (sowohl auf Anfrage-Header- als auch auf window.navigator-Ebene), Standortermittlung und Orientierungsemulation können Sie die Funktionen Ihres Geräts in vollem Umfang nutzen.
Gerätevoreinstellungen
Mit den Emulationen können Sie ein Smartphone oder Tablet auswählen und die richtige Bildschirmgröße, dPR, UA für das Gerät sowie Touch-Ereignisse und den emulierten Viewport erhalten. Sie können bestimmte Voreinstellungen ausprobieren oder diese Eigenschaften ganz einfach einzeln anpassen.
Unter devtools.chrome.com finden Sie die vollständigen Informationen zur mobilen Emulation mit den DevTools.
Demo
Eine vollständige Demo aller dieser Funktionen in Aktion finden Sie in meinem 23-minütigen Vortrag über die DevTools für Mobilgeräte auf dem Chrome Dev Summit: