Chrome Canary ist seit einem Monat mit vielen Funktionen verfügbar. Lesen Sie weiter, um zu erfahren, welche Drittanbieterskripts Leistungsprobleme auf Ihrer Website mit den aggregierten Details in der Zeitachse verursachen, wie Sie einheitliche Farben mit der neuen Farbpalette auswählen, wie Sie Konferenz-WLAN mit anpassbaren Netzwerkprofilen simulieren und wie Sie die Entwicklertools-Benutzeroberfläche mit dem neuen Hauptmenü und besseren Kurzinfos optimal nutzen können.
Bessere Schuldzuweisungen: Zusammengefasste Details in der Zeitachse
Auf den heutigen Websites setzen wir immer mehr Beacons, Analyse-, soziale Dienste, Schriftarten und Werbedienste von Drittanbietern ein, teilweise zu viele. Damit dies nicht geschieht und Sie einen besseren Überblick über das Problem erhalten, führen wir zusammengefasste Details in die Zeitachse ein.
Auf dem Tab Aggregated Details (Zusammengefasste Details) können Sie sich auf kostspielige Funktionen oder die gesamte Aufrufstruktur konzentrieren und dann die ausgewählten Daten nach Domain, Subdomain oder verschiedenen URLs aufschlüsseln. In der Zeitachse oben können Sie beispielsweise Verlangsamungen beim Seitenaufbau ganz einfach Drittanbieterskripts zuordnen, die von Domains wie facebook.net oder twitter.com stammen.
Neues, spezielles Hauptmenü
Um die Hauptsymbolleiste übersichtlicher zu gestalten, befinden sich die Symbole für die Leiste, die Einstellungen und das Andocken jetzt in einem neuen Hauptmenü.
Insbesondere das Andocken ist viel einfacher geworden. Anstatt lange auf das vorherige Symbol zu drücken, wird für jede Docking-Position ein eigenes Symbol angezeigt.
Neben dem Dock haben wir auch Schnellzugriff auf die Dateisuche, Verknüpfungen und Hilfe hinzugefügt, die zu unserer neuen Startseite führen.
Verbesserte Kurzinfos zu den Entwicklertools
In den Entwicklertools gibt es viele Schaltflächen und wir wissen, dass nicht alle selbsterklärend sind. Die systemnativen Kurzinfos wurden durch benutzerdefinierte, plattformkonsistente Kurzinfos ersetzt. So können Sie Aktionen und Tastenkombinationen jetzt noch einfacher finden.
Die neuen Kurzinfos werden viel schneller angezeigt und enthalten gegebenenfalls Tastenkombinationen.
Benutzerdefinierte Profile für Netzwerkdrosselung erstellen
Wenn die Standardoptionen für den Netzwerk-Throttler für Ihre Anwendungsfälle zu eingeschränkt sind und Sie eine WLAN-Option für Konferenzen benötigen oder aus Nostalgie eine 110-Baud-Linie emulieren möchten, haben wir gute Nachrichten für Sie. Im neuen Bereich „Einstellungen“ können Sie all dies tun.
Automatische, Material- und benutzerdefinierte Farbvorlagen
Ganz gleich, ob Sie die Farben von Zauberei nachstellen oder mit einer vorhandenen Farbpalette arbeiten möchten – mit der verbesserten Farbauswahl können Sie eine einheitliche Farbpalette für Ihre Website auswählen.
Über das kleine Schaltersymbol neben der Palette können Sie zwischen folgenden Optionen wählen:
- Seitenfarben: Diese Palette wird automatisch aus den Farben generiert, die wir in Ihrem CSS-Code gefunden haben. Daher eignet sich diese Palette hervorragend, um eine vorhandene Website zu erweitern.
- Material Design – Die Material Design-Palette bietet sofort schöne Farben und ist eine ideale Wahl, wenn Sie ein neues Projekt starten. Derzeit gibt es alle Primärfarben, aber wir werden bald auch alle Schattierungen hinzufügen.
- Benutzerdefiniert – Ihr eigener Spielplatz. Sie können neue Farben hinzufügen, indem Sie eine in der Farbauswahl auswählen und dann auf das Pluszeichen Sie können die Reihenfolge ändern, indem Sie sie verschieben und mit der rechten Maustaste klicken, um weitere Optionen (z. B. „Entfernen“) aufzurufen.
Teilen Sie uns Ihre Meinung mit und wie wir die Farbgeschichte noch weiter ausbauen können.
Der Rest
- Anfragen mit der fetch() API werden jetzt im Netzwerkbereich angezeigt.
- Durch das automatische Steuerfeldlayout werden die Bereiche
der Entwicklertools an die neuen Platzbeschränkungen angepasst. - Für Element und Gerätemodus prüfen gibt es eine Reihe neuer Symbole.
- Attribute im DOM-Bereich werden jetzt auch dann anders eingefärbt, wenn der Knoten hervorgehoben ist. (Sie sind zuvor alle weiß.)
- Ausgeblendete Elemente, die durch Drücken von "h" auf einem ausgewählten DOM-Knoten aktiviert werden, zeigen jetzt links einen grauen Kreis an. DOM-Haltepunkte tun dasselbe mit einem blauen Kreis. Dies entspricht den orangefarbenen Indikatoren, mit denen ein Elementstatus wie „:hover“ erzwungen wird.
Wie immer kannst du uns über Twitter oder in den Kommentaren unten deine Meinung mitteilen. Programmfehler kannst du unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das Entwicklertools-Team