Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 121)

Sofia Emelianova

Optimierte Filterleiste im Netzwerkbereich

Mit der neu gestalteten Filterleiste können Sie Anfragen einfacher filtern und den Bereich Netzwerk übersichtlicher gestalten.

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

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

Wenn Sie die alte Filterleiste sofort wieder verwenden möchten, deaktivieren Sie Einstellungen Einstellungen > Tests > check_box_outline_blank Neugestaltung der Filterleiste im Steuerfeld „Netzwerk“.

Das Vorher-Nachher-Optimieren der Filterleiste im Bereich „Netzwerk“.

Unter crbug.com/1500573 können Sie uns gern Feedback zu dieser Funktion geben.

Chromium-Problem: 1486431.

Verbesserungen an Elementen

`@font-palette-values`-Support

Das Steuerfeld "Elemente" unterstützt jetzt die CSS-at-Regel @font-palette-values. Sie können damit die Standardwerte der Eigenschaft font-palette anpassen.

Wenn du unter Stile auf den Wert der font-palette-Eigenschaft klickst, gelangst du über die Entwicklertools zum Abschnitt @font-palette-values, in dem du deine benutzerdefinierten Werte bearbeiten kannst.

Im Bereich „@font-palette-values“ unter „Stile“

Chromium-Problem: 1501781.

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

Unter Elemente > Stile wird jetzt eine benutzerdefinierte Eigenschaft aufgelöst, die ein Fallback einer anderen benutzerdefinierten Eigenschaft ist.

Der Vorher-Nachher-Vergleich einer benutzerdefinierten Eigenschaft als Fallback einer anderen benutzerdefinierten Eigenschaft.

Chromium-Problem: 1499265.

Verbesserte Unterstützung von Source Maps

Die Einstellungen Einstellungen > Tests > Kästchen Variablennamen in Ausdrücken mithilfe von Quellzuordnungen auflösen wurden standardmäßig aktiviert.

In den Entwicklertools werden Source Maps verwendet, damit Sie Ihren ursprünglichen Code in Sources und Scope debuggen können, auch nachdem Sie ihn kombiniert, reduziert oder kompiliert haben. Mit diesem Test können Sie Ihre ursprünglichen Variablennamen in den Entwicklertools einheitlich bewerten, einschließlich, aber nicht beschränkt auf:

Ausdrücke in der Konsole und Vorschläge für die automatische Vervollständigung
Live-Ausdrücke
Watch-Ausdrücke
Bedingte Haltepunkte und Logpoints

Weitere Informationen finden Sie in der zugehörigen RFC-Nummer.

Chromium-Problem: 1444349.

Verbesserungen im Bereich „Leistung“

Track „Erweiterte Interaktionen“

Im Track Leistung > Interaktionen sind Schnurrhaare zu erkennen, die Eingabe- und Präsentationsverzögerungen während der Verarbeitungszeiten anzeigen.

Das Hinzufügen von Whiskers vor und nach dem Interactions-Track.

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

Chromium-Problem: 1495751.

Erweiterte Filter auf den Tabs „Bottom-up“, „Aufrufstruktur“ und „Ereignisprotokoll“

Auf den Tabs Bottom-up, Call Tree und Ereignisprotokoll im Steuerfeld Leistung gibt es drei neue Schaltflächen für erweiterte Filter:

match_case Groß-/Kleinschreibung beachten:
regular_expression – Regulärer Ausdruck:
match_word Sucht nach einem ganzen Wort.

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

Damit der Kontext nicht verloren geht, entsprechen jetzt nur Elemente der obersten Ebene dem Filter auf dem Tab Bottom-up. Bisher stimmte der Filter mit jedem Knoten überein.

Chromium-Problem: 1496355.

Einzugsmarkierungen im Bereich „Quellen“

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

Das Vorher- und Nachher-Markieren eingerückter Codeblöcke mit vertikalen Linien.

Chromium-Problem: 1479986.

Hilfreiche Kurzinfos für überschriebene Header und Inhalte im Steuerfeld „Netzwerk“

Im Bereich Netzwerk werden jetzt Kurzinfos angezeigt, wenn Sie den Mauszeiger auf das Symbol mit dem lila Punkt neben den Tabs Headers und Response (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 „Antworten“.

Chromium-Problem: 1469776.

Sie können jetzt im Befehlsmenü Befehle eingeben, mit denen Blockiermuster für Netzwerkanfragen hinzugefügt oder entfernt werden.

Die Befehle „Vorher“ und „Nach dem Hinzufügen“ zum Hinzufügen oder Entfernen von Blockiermustern für das Netzwerk.

Über den Befehl Add (Hinzufügen) gelangen Sie zum Dialogfeld, in dem Sie das Muster angeben. Mit dem Befehl Remove werden alle Muster entfernt, ohne dass der Bereich Blockierung der Netzwerkanfrage 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 als redundant entfernt.

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

Die Content Security Policy im Anwendungsbereich

Außerdem werden im Bereich Probleme CSP-Verstöße aufgeführt.

Die Content Security Policy im Anwendungsbereich

Lighthouse 11.3.0

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

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die Bedienungshilfen verbessert:

Unter Netzwerk > Nutzlast können Sie jetzt die Schaltflächen Quelle anzeigen und URL-codiert anzeigen mithilfe der Tabulatortaste öffnen und die Eingabetaste oder Leertaste drücken, um die entsprechende Aktion auszulösen.
In der Console sind die Links, die zu Skripts führen, die für den Debugger nicht mehr verfügbar sind, ausgegraut und können nicht angeklickt werden.
In Navigationsstrukturen wie der Baumstruktur in Quellen > Seite werden Knoten mit untergeordneten Elementen jetzt mit der Eingabetaste maximiert und minimiert.

Chromium-Probleme: 1338391, 1500662, 1420362.

Verschiedene Highlights

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

Leistung: Wenn eine Aufzeichnung fehlschlägt, können Sie jetzt die Trace-Rohdaten herunterladen und versuchen, den Fehler herauszufinden (Commit durchführen).
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 Sie ein zweites Mal drücken.
Ressourcen für Entwickler. Es wurde ein Fehler behoben, durch den CSS-Ressourcen und die zugehörigen Probleme nicht gemeldet werden konnten (1420362).
Elemente:
- Ein Fehler bei der Überprüfung von Elementen in iFrames wurde behoben (1453375).
- Berechnet: Ein Fehler wurde behoben, der das Rendern von Standardwerten verhindert (1499882).
- Search aufrufen. Es wurde ein Fehler behoben, bei dem die Anzahl der Übereinstimmungen für kurze Suchanfragen mit ein oder zwei Zeichen (1416457) nicht berechnet werden konnte.
Konsole: Reguläre Ausdrücke, die mit einem Escape-Zeichen im Feld Filter enden (1346936), werden jetzt korrekt geparst.
Einstellungen > Arbeitsbereich. Es wurde ein Fehler behoben, der das Hinzufügen eines ausgeschlossenen Ordners (1503580) verhinderte.
Netzwerk > Vorschau. Rendern Sie jetzt Bilder mit data:-URIs (1381791).
Arbeitsspeicher: Die Schaltflächen zum Speichern von Uploads und Herunterladen wurden zur Aktionsleiste hinzugefügt (1275407).

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
Melde ein Problem mit den Entwicklertools über Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
Twittern Sie unter @ChromeDevTools.
Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.