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 Konferenz-WLANs 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 den Websites von heute nutzen wir immer mehr Beacons, Analysedienste, soziale Dienste, Schriftarten und Werbedienste von Drittanbietern, manchmal zu viele. Damit dies nicht passiert und um Ihnen einen Überblick über das Problem zu verschaffen, haben wir in der Zeitachse aggregierte Details eingeführt.
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, spezielles Hauptmenü
Um die Hauptsymbolleiste übersichtlicher zu gestalten, haben wir Leiste, Einstellungen und Symbole für das Andocken in ein neues, spezielles Hauptmenü verschoben.
Insbesondere das Andocken ist jetzt viel einfacher geworden. Anstatt lange auf das vorherige Symbol zu drücken, wird für jede Docking-Position ein eigenes Symbol angezeigt.
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
Wir haben viele Schaltflächen in den Entwicklertools, 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 sofort schöne Farben und ist eine ideale Wahl für den Beginn eines neuen Projekts. Derzeit sind alle Primärfarben verfügbar, aber bald kommen auch alle Schattierungen dazu.
- Benutzerdefiniert: Hier können Sie sich austoben. Wenn Sie neue Farben hinzufügen möchten, wählen Sie eine Farbe in der Farbauswahl aus und klicken Sie dann auf das Pluszeichen neben der Palette. 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. - Untersuchen von Elementen und Gerätemodus hat eine Reihe neuer Symbole.
- Attribute im DOM-Bereich sind jetzt auch dann unterschiedlich gefärbt, wenn der Knoten hervorgehoben ist. Vorher waren sie alle weiß.
- Bei ausgeblendeten Elementen, die durch Drücken von "h" auf einem ausgewählten DOM-Knoten aktiviert werden, wird jetzt links ein grauer Kreis angezeigt. Dasselbe gilt für DOM-Haltepunkte mit einem blauen Kreis. Das entspricht den orangefarbenen Indikatoren, die wir bereits für das Erzwingen eines Elementstatus wie :hover haben.
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