Hier erfährst du, wie die Entwicklertools mit einem neuen, optimierten Gerätemodus, der immer aktiviert ist, an die Mobilgeräte rückt. Mit den Farbschaltflächen kannst du deinen Selektoren schnell Farben hinzufügen und herausfinden, was bald in den Entwicklertools erwartet wird.
Ein Blick in die Zukunft des Verfassens
wir kommen vom Chrome Dev Summit zurück, bei dem ich gezeigt habe, wie die Arbeit mit DevTools heute und in Zukunft aussieht. Normalerweise erwähne ich in dieser Übersicht keine Funktionen, die noch in der Testphase sind oder aufwendige Fortschritte sind, aber diesmal mache ich eine Ausnahme. Falls du nicht die Zeit hast, dir die gesamte Präsentation anzusehen:
Gerätemodus Version 2
Wir arbeiten immer noch intensiv an dieser neuen, gewagten Version des Gerätemodus, wollten aber allen die Möglichkeit geben, ihn auszuprobieren. Deshalb haben wir ihn heute auf deiner Canary-Version aktiviert. Mit den Änderungen machen wir die Entwicklertools in eine Mobile-First-Zukunft, in der die mobile Entwicklung der Standard ist und die Desktop-Entwicklung das „Add-on“ ist. Weitere Iterationen in den nächsten Wochen sind in einem ausführlichen Blogpost zu erwarten.
Leistungsstarke Animationsprüfung
Die laufende Animation liefert Ihnen ein vollständiges, detailliertes Bild von den Bewegungen. Anstatt dir nur jeweils einen Übergang zu zeigen, haben wir Heuristiken hinzugefügt, die komplexe Animationen gruppieren, damit du dich auf alles konzentrieren kannst, was du siehst. Sieh dir das Video an. Sobald die Funktion vollständig verfügbar ist, werden wir einen größeren, eigenständigen Blogpost veröffentlichen.
Layoutmodus (Vorschau)
Der neue Layoutmodus ist noch nicht ganz fertig, aber sehr vielversprechend. 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 kontextabhängig bearbeitet werden. Es dauert noch etwas länger, bis du es ausprobieren kannst. Wir halten dich aber auf dem Laufenden.
Leistungsprofil mit dem aktualisierten Steuerfeld „Zeitachse“ erstellen
Im Zuge der Einführung des neuen RAIL-Leistungsmodells haben wir Hunderte kleinere und größere Änderungen am Zeitachsenbereich vorgenommen, die zusammen das Leistungsprofiling erheblich verbessern und verbessern. Anstatt also jede einzelne Änderung einzeln zu zeigen, zeigte uns unser eigener Paul Irish, wie wir die Leistung einer Website richtig debuggen können, in diesem Fall die mobile Website von Hotel Tonight, live auf der Bühne. Zu den neu angekündigten Funktionen gehören Lade- und Performance-Filmstreifen, der eingeschlossene Netzwerk-Wasserfall, die Treeview-Zusammenfassung und die Möglichkeit, Leistungskosten nach Domain und Datei anzusehen.
Sie können jedem Element ganz einfach Vorder- und Hintergrundfarben hinzufügen
Wenn Sie einem Element eine Eigenschaft für Hintergrundfarbe oder -farbe hinzufügen wollten, konnten Sie nicht einfach die Farbauswahl öffnen. Stattdessen geben die meisten von Ihnen jedes Mal etwas wie „Hintergrund: Rot;“ ein, sodass das Farbauswahlsymbol angezeigt wird, und wählen Sie dann die gewünschte Farbe aus.
Wir dachten, wir könnten dies vereinfachen. Wir haben zwei raffinierte Schaltflächen hinzugefügt, die erscheinen, wenn Sie den Mauszeiger auf die untere rechte Ecke eines Selectors bewegen. Über diese Schaltflächen können Sie eine Farbe hinzufügen und die Auswahl mit einem einzigen Klick aufrufen:
Das Beste vom Rest
- Wir haben in der Vergangenheit viel Platz im Steuerfeld „Stil“ verschwendet, indem wir allgemeine Medientypen angezeigt haben. Diese Inhalte werden jetzt vor der Auswahl ausgeblendet, wenn dies nicht ungewöhnlich ist.
- Sie können jetzt im Steuerfeld „Stil“ den Mauszeiger lange auf einen CSS-Selektor bewegen, um zu sehen, für wie viele Elemente auf der Seite er gilt.
- Sie haben noch nicht aufgegeben? Die Druckmedien-Emulation ist noch verfügbar, um zu sehen, wie deine Seite gedruckt aussieht. Wir haben sie gerade in die Rendering-Einstellungen verschoben.
- Bei der Auswahl eines zu untersuchenden Elements wird jetzt die relevante DOM-Unterstruktur automatisch erweitert und geschlossen. Sehen ist Glauben.
Wie immer kannst du uns über Twitter mitteilen oder in den Kommentaren unten Feedback geben. Programmfehler kannst du unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team