In diesem Artikel erfahren Sie, wie DevTools mit einem neuen, optimierten Gerätemodus, der immer aktiviert ist, Mobile-first wird. Mit den Farbschaltflächen können Sie Ihren Auswahlelementen schnell Farben hinzufügen und herausfinden, was demnächst in den DevTools verfügbar sein wird.
Ein Blick in die Zukunft des Autorings
Wir sind gerade vom Chrome Dev Summit zurückgekehrt, auf dem ich Ihnen gezeigt habe, wie die Arbeit mit den DevTools heute und in Zukunft aussieht. Normalerweise erwähne ich in diesem Digest keine Funktionen, die noch in der Testphase sind oder sich noch in der Entwicklungsphase befinden. Diesmal mache ich aber eine Ausnahme. Falls Sie nicht die Zeit haben, sich den gesamten Vortrag anzusehen, hier eine Zusammenfassung:
Gerätemodus Version 2
Wir arbeiten noch intensiv an dieser neuen, mutigen Version des Gerätemodus, möchten aber allen die Möglichkeit geben, sie auszuprobieren. Deshalb haben wir sie heute in Canary aktiviert. Mit diesen Änderungen möchten wir die DevTools auf eine Mobile-first-Zukunft vorbereiten, in der die mobile Entwicklung standardmäßig ist und die Entwicklung für Computer nur ein „Add-on“ ist. In den nächsten Wochen werden weitere Iterationen folgen. Wenn wir fertig sind, veröffentlichen wir einen ausführlichen Blogpost.
Leistungsstarke Animationsinspektion
Die Animationsprüfung ist noch in der Entwicklungsphase. Sie bietet aber bereits einen umfassenden Überblick darüber, was sich bei bewegten Objekten abspielt. Anstatt Ihnen eine Überblendung für ein Element nach dem anderen zu zeigen, haben wir Heuristiken hinzugefügt, mit denen komplexe Animationen gruppiert werden, damit Sie sich auf das Wesentliche konzentrieren können. Sehen Sie sich das Video an. Nach der vollständigen Einführung werden wir einen ausführlicheren, eigenständigen Blogpost veröffentlichen.
Layoutmodus (Vorabversion)
Der neue Layout-Modus ist noch nicht ganz ausgereift, aber sehr vielversprechend. Ich bin schon sehr gespannt, wie er sich weiterentwickelt. Im Layout-Modus werden den DevTools WYSIWYG-Bearbeitungsfunktionen für alle Elemente auf der Seite hinzugefügt. Bisher können Höhe, Breite, Abstände und Ränder im Kontext bearbeitet werden. Es wird noch etwas dauern, bis wir es dir anbieten können. Wir halten dich auf dem Laufenden.
Leistungsprofilierung mit dem aktualisierten Zeitleistenbereich
Im Rahmen der Einführung des neuen RAIL-Leistungsmodells wurden Hunderte von kleineren und größeren Änderungen am Zeitachsenbereich vorgenommen. Zusammengenommen verändern und verbessern sie das Leistungsprofil erheblich. Anstatt jede einzelne Änderung einzeln zu zeigen, hat Paul Irish uns live auf der Bühne gezeigt, wie man die Leistung einer Website, in diesem Fall die mobile Website von Hotel Tonight, richtig debuggt. Zu den neu angekündigten Funktionen gehören die Filmstreifen für Lade- und Leistungsdaten, die eingeschlossene Netzwerkabfolge, die Übersicht in der Strukturansicht und die Möglichkeit, Leistungskosten nach Domain und Datei aufzurufen.
Elementen ganz einfach Vordergrund- und Hintergrundfarben hinzufügen
Wenn Sie Ihrem Element eine Hintergrundfarbe oder eine Farbeigenschaft hinzufügen wollten, konnten Sie nicht einfach die Farbauswahl öffnen. Stattdessen geben die meisten von Ihnen jedes Mal etwas wie „background: red;“ ein, damit das Symbol für die Farbauswahl angezeigt wird, und wählen dann die gewünschte Farbe aus.
Wir haben uns gedacht, dass wir das vereinfachen können. Wir haben zwei praktische Schaltflächen hinzugefügt, die angezeigt werden, wenn Sie den Mauszeiger auf den rechten unteren Eckpunkt einer Auswahl bewegen. So können Sie mit nur einem Klick eine Farbe hinzufügen und die Farbauswahl aufrufen:
Das Beste vom Rest
- Bisher wurde im Bereich „Stil“ viel Platz für generische Medientypen verschwendet. Wir verbergen diese Inhalte jetzt vor Ihren Auswahlschaltern, wenn sie nicht ungewöhnlich sind.
- Wenn Sie jetzt im Bereich „Stil“ den Mauszeiger lange auf einen CSS-Selektor bewegen, sehen Sie, auf wie viele Elemente auf der Seite er angewendet wird.
- Sie haben noch nicht aufgegeben? Die Druckmedien-Emulation ist weiterhin verfügbar, um zu sehen, wie Ihre Seite gedruckt aussehen würde. Wir haben sie nur in die Rendering-Einstellungen verschoben.
- Wenn Sie ein Element zum Prüfen auswählen, wird der entsprechende DOM-Unterbaum jetzt automatisch maximiert und geschlossen. Das ist schwer zu erklären, Sehen ist Glauben.
Wie immer freuen wir uns über Feedback auf Twitter oder in den Kommentaren unten. Fehler können Sie unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team