Neuer Gerätemodus für die Mobile-First-Generation
Vor etwas mehr als einem Jahr haben wir den Gerätemodus eingeführt, mit dem sich Geräte emulieren und mit responsiven Designs arbeiten lassen. Es ist Zeit für das erste größere Upgrade ab Chrome 49. Was gibts Neues?
Mobilgeräte werden zum Ausgangspunkt in den Chrome-Entwicklertools. Während wir in der Vergangenheit Möglichkeiten zur Emulation von Mobilgeräten angeboten haben, war die Standardeinstellung für die Entwicklung Desktop-Computer. Die mobile Emulation musste immer aktiviert sein. Da mittlerweile immer mehr mobile Websites genutzt werden, ändern wir die Position auch in den Entwicklertools.
Neuigkeiten
Zunächst einmal ist die Benutzeroberfläche übersichtlich und benötigt viel weniger Platz. Wir gehen davon aus, dass der neue Gerätemodus in den meisten Fällen zum wichtigsten Entwicklungsmodus werden wird. Daher war ein klares und einfaches Design erforderlich, das die Hauptnavigationsleiste der Entwicklertools erweitert.
Das neue Geräte Lineal lässt sich im Handumdrehen über Medienabfragen steuern.
Außerdem haben wir den Darstellungsbereich zentriert und oben ein neues Quick Jump-Geräte Lineal hinzugefügt, das beim responsiven Design sehr hilfreich ist und Ihnen eine Vorstellung von den gängigsten Gerätegrößen gibt.
Außerdem wurden viele Optionen nach Möglichkeit gebündelt oder hinter einer Ein/Aus-Schaltfläche verborgen. Diese neuen zusammengesetzten Optionen vereinfachen das Wechseln zwischen den Modi. Über das Dreipunkt-Menü können Sie bestimmte Steuerelemente aktivieren oder anpassen.
Standardmäßig responsiv
Die Hauptsymbolleiste der Entwicklertools wird jetzt auf der linken Seite des Browserfensters erweitert und enthält die wichtigsten Tools zur Emulation einer Vielzahl von Mobil- und Desktop-Geräten. Sie können zwischen zwei Entwicklungsmodi wählen:
- Responsive Anzeigen
- Bestimmtes Gerät
In beiden Modi befindet sich der Darstellungsbereich in einem eigenen Fenster mit anpassbarer Größe in Chrome. Dies hat den wesentlichen Vorteil, dass Sie Ihr Browserfenster und die Entwicklertools nach Belieben maximieren können und dass sie nicht ständig zwischen den Seiten wechseln müssen, wenn Sie mehrere Größen Ihrer Seite testen und hin- und herwechseln.
Der Modus Responsiv ist während der aktiven Iteration empfehlenswert, damit Ihre Website auf allen Arten von Geräten funktioniert, nicht nur auf bestimmten. In diesem Modus können die Ziehpunkte neben dem Darstellungsbereich frei geändert werden.
Bestimmtes Gerät bezieht sich darauf, dass Sie ein bestimmtes Gerät auswählen und den Darstellungsbereich auf seine Größe sperren. Das ist nützlich, wenn Sie noch kurz vor der Markteinführung letzte Fehlerkorrekturen und Anpassungen einiger beliebter Geräte benötigen. Deshalb wird im Drop-down-Menü nicht nur eine umfangreiche Liste aller möglichen Geräte angezeigt, sondern auch die derzeit beliebtesten. Wenn Sie sich für eine Option entscheiden, tun wir unser Bestes, damit sie dem eigentlichen Ergebnis entspricht: Touch-Ereignisse, User-Agent, Darstellungsbereich sowie Geräte-Chrome und die Benutzeroberfläche (falls verfügbar) werden alle emuliert.
Integrierte Remote-Debugging
Selbst die besten verfügbaren Emulationen bringen Sie nur so weit. Es gibt Dinge, die mit Emulationen derzeit nicht möglich sind, z. B.:
- Prüfe, ob eine Taste groß genug für deinen Daumen ist.
- Testen Sie die Leistung Ihrer Website auf einem langsameren Smartphone.
- Beheben Sie Fehler und Einschränkungen bestimmter Geräte.
Damit alle diese Szenarien ausreichend getestet werden können, müssen Sie mit physischen Geräten testen, arbeiten und Fehler beheben.
Seit einiger Zeit kannst du chrome://inspect aufrufen, dein Gerät über USB verbinden und über die Entwicklertools eine Remote-Debugging-Sitzung öffnen. Wir sind jedoch noch einen Schritt weiter gegangen und haben das Aussehen und die Funktionsweise des Remote-Debugging überarbeitet und in den Kern der Entwicklertools eingebettet. Anstatt zu einer anderen Seite zu suchen, können Sie jetzt direkt im neuen Hauptmenü als Dialogfeld auf Geräte untersuchen zugreifen. Dies macht es viel einfacher, physisches Debugging in Ihren Workflow einzubinden. Schließen Sie einfach Ihr Smartphone an die Stromversorgung an und müssen Sie die Entwicklertools nicht beenden.
Ein neues Zuhause für die restlichen Emulationskontrollen
Da Mobilgeräte jetzt die Standardeinstellung in den Entwicklertools sind, wurden Funktionen wie Netzwerkdrosselung an den richtigen Ort verschoben, in diesem Fall in den Bereich „Netzwerk“.
Einige Funktionen wie die Emulation von Sensoren oder Wiedergabeeinstellungen wie die Emulation von Printmedien wurden an eine einheitliche Stelle in der Leiste verschoben. Alle Extras finden Sie im neuen Hauptmenü unter „Weitere Tools“.
Wir wissen, dass dies eine erhebliche Änderung ist, an die wir uns alle gewöhnen müssen. Ausführliche Informationen zu diesem Thema finden Sie in der zuletzt aktualisierten Dokumentation zum Gerätemodus. Wir würden uns freuen, wenn Sie uns auf Twitter mitteilen oder wenn Sie mehr als 140 Zeichen benötigen, in unserem Bug Tracker (ja, auch bei Funktionsanfragen).