Hier erfährst du, wie die Entwicklertools mit dem neuen, optimierten Gerätemodus, der immer aktiviert ist, zuerst für Mobilgeräte optimiert werden. Über die Farbschaltflächen kannst du deinen Selektoren schnell Farben hinzufügen und erfährst, was bald in den Entwicklertools verfügbar ist.
Ein Einblick in die Zukunft des Authoring
Wir sind gerade vom Chrome Dev Summit zurück, auf dem ich Ihnen gezeigt habe, wie die Arbeit mit Entwicklertools heute und in Zukunft aussieht. Normalerweise erwähne ich in dieser Übersicht keine Funktionen, bei denen es sich noch um Experimente oder umfangreiche Fortschritte handelt, aber dieses Mal mache ich eine Ausnahme. Falls Sie keine Zeit haben, sich die gesamte Präsentation anzusehen, hier eine Zusammenfassung:
Gerätemodus Version 2
Wir arbeiten immer noch intensiv an dieser neuen, kühnen Version des Gerätemodus, möchten aber allen die Möglichkeit geben, ihn auszuprobieren. Deshalb haben wir ihn heute in Canary aktiviert. Durch die Änderungen rücken die Entwicklertools in eine Zukunft, bei der die Mobilgeräte-Entwicklung zum Standard ist, und die Desktop-Entwicklung ist das „Add-on“. In den nächsten Wochen findet ihr einen erweiterten Blogpost, wenn wir fertig sind.
Leistungsstarke Animationsprüfung
Die noch nicht fertiggestellte Animationsinspektion liefert dir ein vollständiges und detailliertes Bild davon, was sich bewegt. Statt einen Übergang für einzelne Elemente zu zeigen, haben wir Heuristiken hinzugefügt, die komplexe Animationen gruppieren, damit Sie sich auf alles konzentrieren können, was Sie sehen. Sehen Sie sich das Video an. Sobald die Einführung abgeschlossen ist, wird es einen größeren, eigenständigen Blogpost geben.
Layoutmodus (Vorschau anzeigen)
Der neue Layoutmodus ist noch nicht ganz so ausgereift, aber sehr vielversprechend. Ich kann es kaum erwarten, ihn vollständig umgesetzt zu sehen. Der Layoutmodus fügt den Entwicklertools WYSIWYG-Bearbeitungsfunktionen für jedes Element auf der Seite hinzu. Bisher können Höhe, Breite, Abstände und Ränder im Kontext bearbeitet werden. Es wird etwas länger dauern, bis wir Sie testen können. Wir halten Sie auf dem Laufenden.
Leistungsprofil mit aktualisiertem Steuerfeld „Zeitachse“
Im Rahmen der Einführung des neuen RAIL-Leistungsmodells wurden Hunderte von kleineren und größeren Änderungen am Steuerfeld „Zeitachse“ vorgenommen. Zusammen verändern sie die Story der Leistungsprofilerstellung erheblich. Statt jede einzelne Änderung einzeln zu zeigen, hat Paul Irish uns gezeigt, wie wir die Leistung einer Website – in diesem Fall der mobilen Website von Hotel Tonight – live auf der Bühne beheben können. Zu den neu angekündigten Funktionen gehören die Lade- und Performance-Filmstreifen, die eingeschlossene Netzwerkabfolge, die Baumansicht-Zusammenfassung und die Möglichkeit, die Leistung nach Domain und Datei aufzurufen.
Sie können jedem Element ganz einfach Vorder- und Hintergrundfarben hinzufügen
Wenn Sie Ihrem Element eine Hintergrundfarbe oder eine Farbe hinzufügen wollten, reichte es nicht, einfach die Farbauswahl zu öffnen. Stattdessen geben die meisten von Ihnen jedes Mal etwas wie „background: red;“ ein, sodass das Farbauswahlsymbol angezeigt wird, und wählen dann die gewünschte Farbe aus.
Wir dachten, wir könnten das vereinfachen. Wir haben zwei raffinierte Schaltflächen hinzugefügt, die erscheinen, wenn Sie den Mauszeiger über die rechte untere Ecke eines Selektors bewegen. So können Sie mit einem einzigen Klick eine Farbe hinzufügen und die Auswahl aufrufen:
Alles andere
- Wir haben bisher viel Platz im Bereich „Stil“ vergeudet, indem wir allgemeine Medientypen angezeigt haben. Wir blenden diese Informationen jetzt vor Ihren Selektoren aus, falls dies nicht ungewöhnlich ist.
- Wenn Sie jetzt im Bereich „Stil“ den Mauszeiger auf einen CSS-Selektor bewegen, sehen Sie, auf wie viele Elemente auf der Seite er angewendet wird.
- Sie haben noch nicht auf das Drucken verzichten? Mit der Funktion Print media emulation (Emulation für Printmedien) können Sie sehen, wie Ihre Seite gedruckt aussehen würde. Sie finden sie jetzt in den Rendering-Einstellungen.
- Wenn wir ein zu überprüfendes Element auswählen, wird die relevante DOM-Unterstruktur jetzt automatisch erweitert und geschlossen. Schwer zu erklären, sehen ist Glauben.
Wie immer könnt ihr uns über Twitter oder die Kommentare unten eure Meinung mitteilen und Fehler unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team