Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 121)

Sofia Emelianova

Optimierte Filterleiste im Netzwerkbereich

Die neue Filterleiste wurde neu gestaltet, 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. Sie können den Fortschritt unter crbug.com/1523150 verfolgen.

Die neue Filterleiste hat zwei Drop-down-Menüs: eines zum Auswählen von Anfragetypen und eines zum Ausblenden von Daten- und Erweiterungs-URLs oder zum Anzeigen 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 Einstellungen > Tests > check_box_outline_blank Neu gestaltete Filterleiste im Steuerfeld "Netzwerk".

Im Abschnitt „Vorher“ und „Nachher“ der Filterleiste im Netzwerkbereich.

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

Chromium-Problem: 1486431.

Verbesserungen von Elementen

`@font-palette-values`-Support

Im Steuerfeld „Elemente“ wird jetzt die CSS-At-Regel @font-palette-values unterstützt. Sie können damit die Standardwerte der font-palette-Eigenschaft anpassen.

Klicken Sie unter Styles auf den Wert der Property font-palette. Über die Entwicklertools gelangst du dann zum @font-palette-values-Bereich, in dem du deine benutzerdefinierten Werte bearbeiten kannst.

Abschnitt @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.

Die Zeit vor und nach dem Auflösen einer benutzerdefinierten Eigenschaft als Fallback einer anderen benutzerdefinierten Eigenschaft

Chromium-Problem: 1499265.

Verbesserte Unterstützung von Source Maps

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

Die Entwicklertools verwenden Quellzuordnungen, 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 die ursprünglichen Variablennamen in den Entwicklertools einheitlich bewerten, einschließlich, aber nicht beschränkt auf:

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

Weitere Informationen finden Sie im entsprechenden RFC.

Chromium-Problem: 1444349.

Verbesserungen im Bereich „Leistung“

Track „Erweiterte Interaktionen“

Im Track Leistung > Interaktionen werden Whisker gezählt, die Eingabe- und Präsentationsverzögerungen an den Grenzen der Verarbeitungszeit anzeigen.

Die Phasen vor und nach dem Hinzufügen der Whisker zum Interaktions-Track.

Wenn Sie den Mauszeiger auf eine Interaktion bewegen, sehen Sie außerdem eine hilfreiche Kurzinfo mit Informationen zum Timing.

Chromium-Problem: 1495751.

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

Auf den Tabs Bottom-up, Aufrufbaum und Ereignisprotokoll im Steuerfeld Leistung stehen drei neue Schaltflächen für erweiterte Filter zur Verfügung:

match_case: Groß-/Kleinschreibung beachten
regular_expression Regulärer Ausdruck
match_word: Übereinstimmung mit ganzem Wort

Die drei neuen Schaltflächen für erweiterte Filter.

Damit Sie den Kontext besser erhalten, entsprechen jetzt nur Elemente der obersten Ebene dem Filter auf dem Tab Von unten nach oben. Zuvor 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 der Einfachheit halber mit vertikalen Linien markiert.

Die Markierung der eingerückten Codeblöcke vor und nach der Kennzeichnung mit vertikalen Linien.

Chromium-Problem: 1479986.

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

Im Steuerfeld Netzwerk werden jetzt Kurzinfos angezeigt, wenn Sie den Mauszeiger auf das lila Punktsymbol neben den Tabs Headers und Response einer Anfrage bewegen. In den Kurzinfos sehen Sie, was von den Entwicklertools überschrieben wurde.

Die neuen Kurzinfos neben dem lilafarbenen Punktsymbol auf den Tabs „Headers“ und „Response“.

Chromium-Problem: 1469776.

Sie können jetzt Befehle zum Hinzufügen oder Entfernen von Blockierungsmustern für Netzwerkanfragen im Befehlsmenü eingeben.

Der Abschnitt vor und nach dem Hinzufügen neuer Befehle zum Hinzufügen oder Entfernen von Mustern mit Blockierungen für Netzwerke.

Mit dem Befehl Add gelangen Sie zum Dialogfeld, in dem Sie das Muster angeben müssen. Mit dem Befehl Remove werden alle Muster entfernt, ohne dass der Bereich Blockierung der Netzwerkanfrage geöffnet wird.

Der Test für CSP-Verstöße wurde entfernt

Der experimentelle Tab Verstöße gegen die CSP, der in Version 89 eingeführt wurde, wurde als redundant entfernt.

Wenn Sie 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 angezeigt.

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 Zu den wichtigsten Änderungen gehört die Möglichkeit, Berichte für 404-Seiten auszuführen.

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

Chromium-Problem: 772558.

Bedienungshilfen

In dieser Version wurden die folgenden Verbesserungen der Bedienungshilfen vorgenommen:

Unter Netzwerk > Nutzlast können Sie jetzt den Tab-Fokus auf die Schaltflächen Quelle anzeigen und URL-codierte anzeigen verschieben und die Eingabetaste oder die Leertaste drücken, um die entsprechende Aktion auszulösen.
Um Verwirrung zu vermeiden, sind in der Console die Links zu Skripts, die nicht mehr für den Debugger verfügbar sind, jetzt ausgegraut und können nicht angeklickt werden.
In Navigationsstrukturen, wie z. B. in Quellen > Seite, werden mit der Eingabetaste jetzt Knoten mit untergeordneten Elementen maximiert und minimiert.

Chromium-Probleme: 1338391, 1500662, 1420362.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

Leistung: Wenn eine Aufzeichnung fehlschlägt, können Sie jetzt die Rohdaten der Trace-Ereignisse herunterladen und versuchen, das Problem zu beheben (Commit).
Die Tastenkombination Konsole anzeigen (Strg + ` für Mac, Strg + + für Windows und Linux) öffnet jetzt nicht nur die Konsole, sondern wird auch geschlossen, wenn Sie ein zweites Mal drücken.
Ressourcen für Entwickler. Es wurde ein Fehler behoben, durch den CSS-Ressourcen und ihre Probleme nicht gemeldet werden konnten (1420362).
Elemente:
- Ein Fehler bei der Prüfung von Elementen in iFrames wurde behoben (1453375).
- Berechnet: Ein Fehler wurde behoben, der das Rendern von Standardwerten (1499882) verhinderte.
- Search aufrufen. Es wurde ein Fehler behoben, der die Berechnung der Anzahl der Übereinstimmungen für kurze Abfragen mit einem oder zwei Zeichen (1416457) verhinderte.
Console: Reguläre Ausdrücke, die mit einem maskierten Zeichen im Feld Filter (1346936) enden, werden jetzt korrekt geparst.
Einstellungen > Arbeitsbereich. Es wurde ein Fehler behoben, durch den ein ausgeschlossener Ordner (1503580) nicht hinzugefügt werden konnte.
Netzwerk > Vorschau. Stellt jetzt Bilder mit data:-URIs (1381791) dar.
Arbeitsspeicher: Der Aktionsleiste (1275407) wurden ordnungsgemäße Schaltflächen zum Hochladen und zum Herunterladen zum Speichern hinzugefügt.

Vorschaukanäle herunterladen

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

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

Sende uns über crbug.com Vorschläge oder Feedback.
Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden.
Senden Sie einen Tweet an @ChromeDevTools.
Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.