In Chrome Canary gab es in diesem Monat viele neue Funktionen. Im Folgenden erfahren Sie, welche Drittanbieter-Scripts Leistungsprobleme auf Ihrer Website verursachen, indem Sie die zusammengefassten Details in der Zeitachse verwenden. Außerdem erfahren Sie, wie Sie mit der neuen Farbpalette einheitliche Farben auswählen, wie Sie mit anpassbaren Netzwerkprofilen das WLAN einer Konferenz simulieren und wie Sie mit dem neuen Hauptmenü und besseren Kurzinfos mehr aus der DevTools-Benutzeroberfläche herausholen.
Bessere Zuordnung von Leistungsproblemen: Aggregierte Details in der Zeitachse
Auf modernen Websites werden immer mehr Beacons, Analyse-, Social-Media-, Schrift-Lade- und Werbedienste von Drittanbietern eingesetzt, manchmal ein paar zu viele. Damit das nicht passiert und du einen besseren Überblick über das Problem erhältst, führen wir in der Zeitachse zusammengefasste Details ein.
Auf dem Tab Zusammengefasste Details können Sie sich nur auf kostenintensive Funktionen oder den gesamten Aufrufbaum konzentrieren und die ausgewählten Daten dann nach Domain, untergeordneten Domain oder einzelnen URLs aufschlüsseln. In der obigen Zeitachse eines Seitenladevorgangs können Sie beispielsweise jetzt ganz einfach Verzögerungen auf Scripts von Drittanbietern aus Domains wie facebook.net oder twitter.com zurückführen.
Neues, eigenes Hauptmenü
Um die Hauptsymbolleiste übersichtlich zu gestalten, haben wir die Symbole für die Seitenleiste, die Einstellungen und das Andocken in ein neues, eigenes Hauptmenü verschoben.
Insbesondere das Andocken wurde deutlich vereinfacht. Anstatt lange auf das vorherige Symbol drücken zu müssen, hat jede Dockingposition ein eigenes Symbol.
Neben dem Andocken haben wir eine Schnellzugriffsdateisuche, Tastenkürzel und eine Hilfe hinzugefügt, die zu unserer neuen Startseite führt.
Verbesserte Kurzinfos zu den Entwicklertools
In den DevTools gibt es viele Schaltflächen und wir wissen, dass nicht alle selbsterklärend sind. Wir haben es jetzt einfacher gemacht, Aktionen und ihre Tastenkürzel zu finden, indem wir die systemeigenen Kurzinfos durch benutzerdefinierte, plattformkonforme Kurzinfos ersetzt haben.
Die neuen Kurzinfos werden viel schneller angezeigt und enthalten Tastaturkürzel (falls vorhanden).
Benutzerdefinierte Netzwerkdrosselungsprofile erstellen
Wenn die Standardoptionen für den Netzwerkdrosselmechanismus für Ihre Anwendungsfälle zu eingeschränkt sind und Sie eine „Konferenz-WLAN“-Option benötigen oder aus Nostalgiegründen auf die gute alte Zeit zurückgreifen und eine 110-Baud-Leitung emulieren möchten, habe ich gute Neuigkeiten für Sie. Wir haben einen neuen Bereich „Einstellungen“ hinzugefügt, in dem du all diese Dinge erledigen kannst.
Automatische, Material- und benutzerdefinierte Farbvorlagen
Egal, ob Sie magische Farben nachbilden oder mit einer vorhandenen Farbpalette arbeiten möchten, mit der verbesserten Farbauswahl können Sie eine einheitliche Farbpalette für Ihre Website auswählen.
Wenn Sie auf das kleine Schaltersymbol neben der Palette klicken, haben Sie folgende Möglichkeiten:
- Seitenfarben: Diese Palette wird automatisch aus den Farben generiert, die wir in Ihrem CSS finden. Sie eignet sich daher hervorragend, wenn Sie eine vorhandene Website erweitern.
- Material Design: Die Material Design-Palette bietet wunderschöne Farben und ist die ideale Wahl für den Einstieg in ein neues Projekt. Derzeit sind alle Grundfarben verfügbar, aber bald werden alle Farbtöne hinzugefügt.
- Benutzerdefiniert: Hier können Sie sich austoben. Fügen Sie neue Farben hinzu, indem Sie eine in der Farbauswahl auswählen und dann auf das Pluszeichen neben der Palette klicken. Sie können die Reihenfolge der Elemente ändern, indem Sie sie per Drag-and-drop verschieben. Klicken Sie mit der rechten Maustaste, um weitere Optionen wie „Entfernen“ aufzurufen.
Sagen Sie uns, was Sie davon halten und wie wir die Farbgeschichte weiter ausbauen könnten.
Das Beste vom Rest
- Anfragen, die über die fetch() API gesendet wurden, werden jetzt im Netzwerkbereich angezeigt.
- Dank des automatischen Bereichslayouts passen sich die Bereiche der DevTools
an die neuen Platzbeschränkungen an, wenn Sie die Größe ändern. - Für Element untersuchen und Gerätemodus gibt es neue Symbole.
- Attribute im DOM-Bereich sind jetzt auch dann unterschiedlich gefärbt, wenn der Knoten hervorgehoben ist. (Sie waren vorher alle weiß.)
- Ausgeblendete Elemente (durch Drücken der Taste „h“ auf einem ausgewählten DOM-Knoten aktiviert) werden jetzt links durch einen grauen Kreis und DOM-Bruchstellen durch einen blauen Kreis gekennzeichnet. Das entspricht den orangefarbenen Indikatoren, die wir bereits für das Erzwingen eines Elementstatus wie :hover haben.
Wie immer könnt ihr uns auf Twitter oder in den Kommentaren unten Feedback geben und Fehler unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team