Neu in den Entwicklertools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Optimierte Filterleiste im Netzwerkbereich

Die Filterleiste wurde überarbeitet, damit Sie Anfragen einfacher filtern und den Bereich Netzwerk übersichtlicher gestalten können.

Der entsprechende Test war in dieser Version standardmäßig aktiviert, wird aber zurückgesetzt. Den Fortschritt können Sie unter crbug.com/1523150 verfolgen.

Die neue Filterleiste enthält zwei Drop-down-Menüs: eines zum Auswählen von Anfragetypen und eines zum Ausblenden von Daten- und Erweiterungs-URLs oder zum Anzeigen von blockierten Cookies und Anfragen sowie von Drittanbieteranfragen. Beide Menüs unterstützen die Mehrfachauswahl.

Wenn Sie die alte Filterleiste sofort wiederherstellen möchten, deaktivieren Sie die Einstellungen > Tests > Neugestaltung der Filterleiste im Bereich „Netzwerk“.

Die Filterleiste im Bereich „Netzwerk“ vor und nach der Optimierung.

Sie können uns gerne Feedback zu dieser Funktion unter crbug.com/1500573 geben.

Chromium-Problem: 1486431.

Verbesserungen bei Elementen

@font-palette-values-Support

Das Element-Steuerfeld unterstützt jetzt die CSS-Regel @font-palette-values. Damit können Sie die Standardwerte der Eigenschaft font-palette anpassen.

Klicken Sie unter Stile auf den Wert der Eigenschaft font-palette. Sie werden dann in DevTools zum entsprechenden Bereich @font-palette-values weitergeleitet, in dem Sie Ihre benutzerdefinierten Werte bearbeiten können.

Der Abschnitt „@font-palette-values“ in „Styles“.

Chromium-Problem: 1501781.

Unterstützter Fall: Benutzerdefinierte Eigenschaft als Fallback einer anderen benutzerdefinierten Eigenschaft

Unter Elemente > Stile wird jetzt ein benutzerdefiniertes Attribut aufgelöst, das ein Fallback eines anderen benutzerdefinierten Attributs ist.

Der Wert vor und nach dem Auflösen einer benutzerdefinierten Property als Fallback einer anderen benutzerdefinierten Property.

Chromium-Problem: 1499265.

Verbesserte Unterstützung von Quellzuordnungen

Die Einstellungen > Tests > Variablennamen in Ausdrücken mit Quellzuordnungen auflösen sind jetzt standardmäßig aktiviert.

DevTools verwendet Quellzuordnungen, damit Sie Ihren ursprünglichen Code in Quellen und Bereich debuggen können, auch nachdem Sie ihn kombiniert, minimiert oder kompiliert haben. Mit diesem Test können Sie Ihre ursprünglichen Variablennamen in den Entwicklertools einheitlich auswerten, unter anderem:

Weitere Informationen finden Sie im entsprechenden RFC.

Chromium-Problem: 1444349.

Verbesserungen am Bereich „Leistung“

Erweiterter Interaktions-Track

Die Tracks unter Leistung > Interaktionen haben Antennen, die Eingabe- und Darstellungsverzögerungen an den Verarbeitungsgrenzen angeben.

Die Interaktionsspur vor und nach dem Hinzufügen von Whisker-Linien.

Wenn Sie den Mauszeiger auf eine Interaktion bewegen, wird eine hilfreiche Kurzinfo mit Zeitangaben angezeigt.

Chromium-Problem: 1495751.

Erweiterte Filterung auf den Tabs „Bottom-Up“, „Aufrufbaum“ und „Ereignisprotokoll“

Die Tabs Bottom-Up, Call Tree und Event Log im Bereich Performance haben drei neue Schaltflächen für die erweiterte Filterung erhalten:

  • Groß-/Kleinschreibung beachten.
  • Regulärer Ausdruck.
  • Übereinstimmung mit ganzem Wort.

Die drei neuen Schaltflächen für die erweiterte Filterung.

Außerdem werden auf dem Tab Bottom-up nur noch Elemente der obersten Ebene gefiltert, damit der Kontext erhalten bleibt. Bisher stimmte der Filter mit jedem Knoten überein.

Chromium-Problem: 1496355.

Einrückungsmarkierungen im Quellenbereich

Im Editor im Bereich Quellen werden eingerückte Codeblöcke jetzt mit vertikalen Linien markiert.

Vorher und nachher: eingerückte Codeblöcke mit vertikalen Linien.

Chromium-Problem: 1479986.

Hilfreiche Tooltips für überschriebene Header und Inhalte im Netzwerkbereich

Im Bereich Netzwerk werden jetzt Tooltips angezeigt, wenn Sie den Mauszeiger auf das lila Punkt-Symbol neben den Tabs Header und Antwort einer Anfrage bewegen. In den Kurzinfos erfahren Sie, was von den Entwicklertools überschrieben wurde.

Die neuen Kurzinfos neben dem Symbol mit dem lila Punkt auf den Tabs „Headers“ (Header) und „Response“ (Antwort).

Chromium-Problem: 1469776.

Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Blockierungsmustern für Anfragen

Sie können jetzt Befehle eingeben, um Blockierungsmuster für Netzwerkanfragen im Befehlsmenü hinzuzufügen oder zu entfernen.

Vor und nach dem Hinzufügen neuer Befehle zum Hinzufügen oder Entfernen von Netzwerkblockierungsmustern.

Mit dem Befehl Hinzufügen wird das Dialogfeld geöffnet, in dem Sie das Muster angeben können. Mit dem Befehl Entfernen werden alle Muster entfernt, ohne dass der Bereich Blockierung von Netzwerkanfragen geöffnet wird.

Der Test zu CSP-Verstößen wird entfernt

Der in Version 89 eingeführte experimentelle Tab CSP-Verstöße wurde als redundant entfernt.

Wenn Sie die CSP-Details auf einen Blick sehen möchten, rufen Sie Anwendung > Frames > Content Security Policy (CSP) auf.

Die Content Security Policy im Anwendungsbereich.

Außerdem werden CSP-Verstöße im Feld „Probleme“ gemeldet.

Die Content Security Policy im Anwendungsbereich.

Lighthouse 11.3.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.3.0 ausgeführt. Vollständige Liste der Änderungen Eine wichtige Änderung ist die Möglichkeit, Berichte zu 404-Fehlerseiten zu erstellen.

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

Diese Version bietet die folgenden Verbesserungen in Bezug auf die Barrierefreiheit:

  • Unter Netzwerk > Nutzlast können Sie jetzt die Schaltflächen Quellcode ansehen und URL-codiert ansehen mit der Tabulatortaste fokussieren und die entsprechende Aktion mit der Eingabetaste oder der Leertaste auslösen.
  • In der Konsole sind Links zu Skripts, die für den Debugger nicht mehr verfügbar sind, jetzt ausgegraut und können nicht angeklickt werden.
  • In Navigationsbäumen, z. B. im Baum unter Quellen > Seite, werden Knoten mit untergeordneten Elementen jetzt mit der Eingabetaste maximiert und minimiert.

Chromium-Probleme: 1338391, 1500662, 1420362.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Leistung: Wenn eine Aufzeichnung fehlschlägt, haben Sie jetzt die Möglichkeit, Rohdaten der Trace-Ereignisse herunterzuladen und herauszufinden, was schiefgelaufen ist (Commit).
  • Das Tastenkürzel Konsole einblenden (Strg + ` für Mac, Strg + + für Windows und Linux) öffnet jetzt nicht nur die Konsole, sondern schließt sie auch, wenn es ein zweites Mal gedrückt wird.
  • Entwicklerressourcen Ein Fehler wurde behoben, der das Melden von CSS-Ressourcen und den zugehörigen Problemen verhindert hat (1420362).
  • Elemente:
    • Es wurde ein Fehler beim Untersuchen von Elementen in iFrames behoben (1453375).
    • Berechnet: Es wurde ein Fehler behoben, der das Rendern von Standardwerten verhindert hat (1499882).
    • Search aufrufen. Ein Fehler wurde behoben, der die Berechnung der Anzahl der Übereinstimmungen für kurze Anfragen mit einem oder zwei Zeichen verhinderte (1416457).
  • Console Reguläre Ausdrücke, die mit einem Escapezeichen enden, werden jetzt im Feld Filter korrekt geparst (1346936).
  • Einstellungen > Arbeitsbereich Es wurde ein Fehler behoben, der das Hinzufügen eines ausgeschlossenen Ordners verhinderte (1503580).
  • Netzwerk > Vorschau Bilder werden jetzt mit data:-URIs gerendert (1381791).
  • Arbeitsspeicher In der Aktionsleiste wurden die Schaltflächen zum und hinzugefügt (1275407).

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.