Ein neuer Gerätemodus für eine mobile 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. Jetzt ist es an der Zeit für das erste große Upgrade, beginnend mit Chrome 49. Was gibt es Neues?
Die mobile Ansicht ist der Ausgangspunkt in den Chrome-Entwicklertools. In der Vergangenheit haben wir zwar Möglichkeiten zur Emulation von Mobilgeräten angeboten, die Standardeinstellung für die Entwicklung war jedoch der Computer. Die mobile Emulation musste immer aktiviert sein. Da die Nutzung mobiler Websites an vielen Stellen die Desktopnutzung überholt hat, ändern wir auch unsere Position in den DevTools.
Das ist neu
In erster Linie ist die Benutzeroberfläche optimiert und benötigt viel weniger Platz. Wir gehen davon aus, dass der neue Gerätemodus für die meisten Nutzer der Hauptentwicklungsmodus wird. Daher war ein klares und einfaches Design erforderlich, das die Hauptnavigationsleiste der DevTools erweitert.
Der neue Schnellsprung-Geräte-Lineal über den Media-Queries.
Außerdem haben wir den Darstellungsbereich zentriert und oben ein neues Lineal für den schnellen Gerätewechsel hinzugefügt. Das ist eine große Hilfe beim responsiven Design, da Sie so einen Eindruck von den gängigsten Gerätegrößen erhalten.
Und schließlich wurden viele Optionen nach Möglichkeit zusammengefasst oder hinter einem Schalter versteckt. Mit diesen neuen Optionen für Composite-Aufnahmen lässt sich viel einfacher zwischen den Modi wechseln. Wenn du bestimmte Steuerelemente aktivieren oder die Symbolleiste anpassen möchtest, klicke auf das Dreipunkt-Menü.
Standardmäßig responsiv
Die Hauptsymbolleiste der DevTools wird jetzt auf der linken Seite des Browserfensters maximiert und enthält die wichtigsten Tools zum Emulieren verschiedener Mobil- und Desktopgeräte. Sie können zwischen zwei Entwicklungsmodi wählen:
- Responsive Anzeigen
- Bestimmtes Gerät
In beiden Modi befindet sich der Viewport in einem eigenen, veränderbaren Fenster in Chrome. Das hat den großen Vorteil, dass Sie Ihr Browserfenster und die DevTools nach Belieben maximieren können und sie nicht herumspringen, wenn Sie verschiedene Größen Ihrer Seite testen und hin und her wechseln.
Der Modus Responsive ist der Modus, in dem Sie sich während der aktiven Iteration befinden sollten, um sicherzustellen, dass Ihre Website auf allen Arten von Geräten funktioniert, nicht nur auf einigen bestimmten. In diesem Modus können die Ziehpunkte neben dem Darstellungsbereich frei skaliert werden.
Bestimmtes Gerät bezieht sich darauf, dass Sie ein bestimmtes Gerät auswählen und den Darstellungsbereich auf dessen Größe sperren. Das ist nützlich, wenn Sie kurz vor der Veröffentlichung letzte Fehlerkorrekturen und Optimierungen für einige beliebte Geräte vornehmen möchten. Deshalb wird im Drop-down-Menü nicht nur eine riesige Liste aller möglichen Geräte angezeigt, sondern die derzeit beliebtesten. Wenn Sie eine auswählen, versuchen wir, sie so realistisch wie möglich zu simulieren: Touch-Ereignisse, User-Agent, Viewport, Geräte-Chrome und die Benutzeroberfläche (falls verfügbar) werden emuliert.
Integriertes Remote-Debugging
Emulationen, selbst die besten, sind nur begrenzt hilfreich. Es gibt einfach Dinge, die mit Emulationen heute nicht möglich sind, z. B.:
- Prüfen Sie, ob eine Schaltfläche groß genug für Ihren Daumen ist.
- Testen Sie die Leistung Ihrer Website auf einem langsameren Smartphone.
- Zufällige Probleme und Einschränkungen bestimmter Geräte beheben
Um alle diese Szenarien ausreichend zu testen, müssen Sie sie mit echten physischen Geräten testen, bearbeiten und beheben.
Schon seit einiger Zeit können Sie chrome://inspect aufrufen, Ihr Gerät über USB verbinden und eine Remote-Debugging-Sitzung über die DevTools öffnen. Wir sind jedoch noch einen Schritt weitergegangen und haben das Aussehen und Verhalten des Remote-Debuggings überarbeitet und es in den Kern von DevTools eingebettet. Anstatt eine andere Seite aufzurufen, können Sie jetzt direkt über das neue Hauptmenü auf das Dialogfeld Geräte prüfen zugreifen. So lässt sich das physische Debuggen viel einfacher in Ihren Workflow einbinden – Sie müssen Ihr Smartphone nur anschließen, ohne die DevTools schließen zu müssen.
Neue Standorte für die restlichen ehemaligen Emulation-Steuerelemente
Da die mobile Ansicht jetzt in den DevTools standardmäßig aktiviert ist, wurden Funktionen wie die Netzwerkdrosselung an ihren richtigen Ort verschoben, in diesem Fall in den Bereich „Netzwerk“.
Einige Funktionen, z. B. die Sensoremulation oder Rendering-Einstellungen wie die Emulation von Druckmedien, wurden an eine einheitliche Stelle im Seitenbereich verschoben. Sie finden alle Extras im neuen Hauptmenü unter „Weitere Tools“.
Uns ist bewusst, dass dies eine erhebliche Änderung ist, an die wir uns alle gewöhnen müssen. Ausführliche Informationen zu den Funktionen des Gerätemodus finden Sie in der eben aktualisierten Dokumentation zum Gerätemodus. Du kannst uns gerne auf Twitter kontaktieren. Wenn du mehr als 140 Zeichen brauchst, kannst du dich auch an unseren Bug-Tracker wenden (ja, auch für Funktionsanfragen).