Neu in den Entwicklertools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Optimierte Filterleiste im Bereich „Netzwerk“

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 rückgängig gemacht. Sie können den Fortschritt 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 nur blockierter Cookies und Anfragen sowie Anfragen von Drittanbietern. Beide Menüs unterstützen die Mehrfachauswahl.

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

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

Sie können uns unter crbug.com/1500573 Feedback zur Funktion geben.

Chromium-Problem: 1486431

Verbesserungen bei Elementen

@font-palette-values-Support

Im Bereich „Elemente“ wird jetzt das CSS-At-Rule @font-palette-values unterstützt. Damit können Sie die Standardwerte der Property font-palette anpassen.

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

Im Abschnitt „@font-palette-values“ in „Styles“

Chromium-Problem: 1501781

Unterstützter Fall: Benutzerdefinierte Property als Fallback für eine andere benutzerdefinierte Property

Unter Elemente > Stile wird jetzt eine benutzerdefinierte Property aufgelöst, die ein Fallback für eine andere benutzerdefinierte Property ist.

Die Werte vor und nach der Auflösung einer benutzerdefinierten Property als Fallback einer anderen benutzerdefinierten Property.

Chromium-Problem: 1499265.

Verbesserte Unterstützung von Quellzuordnungen

Die Option Einstellungen > Tests > Variablennamen in Ausdrücken mithilfe von Quellkarten auflösen ist standardmäßig aktiviert.

In den DevTools werden Quellzuordnungen verwendet, damit Sie Ihren ursprünglichen Code in Quellen und Umfang auch dann debuggen können, wenn Sie ihn kombiniert, minimiert oder kompiliert haben. Mit diesem Test können Sie Ihre ursprünglichen Variablennamen in den DevTools einheitlich bewerten, unter anderem:

Weitere Informationen finden Sie im entsprechenden RFC.

Chromium-Problem: 1444349

Verbesserungen am Bereich „Leistung“

Erweiterte Interaktionen erfassen

Der Bereich Leistung > Interaktionen enthält Whisker, die Eingabe- und Präsentationsverzögerungen an den Grenzen der Verarbeitungszeit anzeigen.

Der Interaktions-Track vor und nach dem Hinzufügen von Whiskern

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

Chromium-Problem: 1495751.

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

Die Tabs Bottom-Up, Aufrufabfolge und Ereignisprotokoll im Bereich Leistung 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 den erweiterten Filter

Außerdem werden jetzt nur Elemente der obersten Ebene mit dem Filter auf dem Tab Bottom-Up abgeglichen, damit der Kontext erhalten bleibt. Bisher wurde der Filter auf jeden Knoten angewendet.

Chromium-Problem: 1496355.

Einzugshinweise im Bereich „Quellen“

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

Vor und nach dem Markieren werden eingerückte Codeblöcke mit vertikalen Linien gekennzeichnet.

Chromium-Problem: 1479986

Hilfreiche Kurzinfos zu überschriebenen Überschriften und Inhalten im Bereich „Netzwerk“

Im Bereich Netzwerk werden jetzt Kurzinfos angezeigt, wenn Sie den Mauszeiger auf das lilafarbene Punktsymbol neben den Tabs Header und Antwort einer Anfrage bewegen. In den Kurzinfos sehen Sie, was von den Entwicklertools überschrieben wurde.

Die neuen Kurzinfos neben dem lila Punktsymbol auf den Tabs „Header“ und „Response“.

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.

Vorher und nachher hinzugefügte Befehle zum Hinzufügen oder Entfernen von Blockierungsmustern für Netzwerke

Über den Befehl Hinzufügen gelangen Sie zum Dialogfeld zum Angeben des Musters. Mit dem Befehl Entfernen werden alle Muster entfernt, ohne dass das Steuerfeld Blockierung von Netzwerkanfragen geöffnet wird.

Der Test zu CSP-Verstößen wurde entfernt

Der experimentelle Tab CSP-Verstöße, der in Version 89 eingeführt wurde, wurde entfernt, da er redundant ist.

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

Die Content Security Policy im Bereich „Anwendung“.

Außerdem werden im Bereich Probleme CSP-Verstöße gemeldet.

Die Content Security Policy im Bereich „Anwendung“.

Lighthouse 11.3.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.3.0 ausgeführt. Vollständige Liste der Änderungen Zu den wichtigsten Änderungen gehört die Möglichkeit, Berichte zu 404-Seiten auszuführen.

Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Bedienungshilfen

Diese Version enthält folgende Verbesserungen der Barrierefreiheit:

  • Unter Netzwerk > Nutzlast können Sie jetzt mit der Tabulatortaste den Fokus auf die Schaltflächen Quellcode ansehen und URL-codierte Daten ansehen setzen und die Eingabetaste oder die Leertaste drücken, um die entsprechende Aktion auszulösen.
  • In der Console sind Links zu Scripts, die im Debugger nicht mehr verfügbar sind, jetzt ausgegraut und können nicht angeklickt werden.
  • In Navigationsbäumen wie dem Baum unter Quellen > Seite werden Knoten mit untergeordneten Elementen jetzt mit der Taste Eingabe maximiert und minimiert.

Chromium-Probleme: 1338391, 1500662, 1420362.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Leistung: Wenn eine Aufnahme fehlschlägt, haben Sie jetzt die Möglichkeit, rohe Trace-Ereignisse herunterzuladen und herauszufinden, was schiefgegangen ist (commit).
  • Mit der Tastenkombination Konsole anzeigen (Strg + ` für Mac, Strg + + für Windows und Linux) wird jetzt nicht nur die Konsole geöffnet, sondern auch geschlossen, wenn die Tastenkombination ein zweites Mal gedrückt wird.
  • Entwicklerressourcen Ein Fehler wurde behoben, der das Melden von CSS-Ressourcen und deren Problemen verhinderte (1420362).
  • Elemente:
    • Ein Fehler beim Prüfen von Elementen in iFrames wurde behoben (1453375).
    • Berechnet Es wurde ein Fehler behoben, der das Rendern von Standardwerten verhinderte (1499882).
    • Search aufrufen. Ein Fehler wurde behoben, der die Berechnung der Anzahl der Übereinstimmungen für kurze Suchanfragen mit einem oder zwei Zeichen verhinderte (1416457).
  • Console. Reguläre Ausdrücke, die im Feld Filter mit einem Escape-Zeichen enden, werden jetzt korrekt geparst (1346936).
  • Einstellungen > Arbeitsbereich. Es wurde ein Fehler behoben, durch den es nicht möglich war, einen auszuschließenden Ordner hinzuzufügen (1503580).
  • Netzwerk > Vorschau Bilder mit data:-URIs werden jetzt gerendert (1381791).
  • Arbeitsspeicher In der Aktionsleiste wurden die richtigen Schaltflächen zum und hinzugefügt (1275407).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.