Neu in den Entwicklertools (Chrome 121)

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.

Um die alte Filterleiste sofort wiederherzustellen, deaktivieren Sie Einstellungen Einstellungen > Tests > check_box_outline_blank Neu gestaltete Filterleiste im Steuerfeld „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.

Chromium-Problem: 1501781.

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

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

Chromium-Problem: 1499265.

Verbesserte Unterstützung von Source Maps

Über die Einstellungen Einstellungen > Tests > check_box Variablennamen in Ausdrücken mithilfe von Quellzuordnungen auflösen wurde 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“

Das Menü Leistung > Im Track Interaktionen werden Schnurrhaare angezeigt, die auf Verzögerungen bei der Eingabe und Präsentation während der Verarbeitungszeit hinweisen.

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.

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.

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.

Chromium-Problem: 1469776.

Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Anfrageblockierungsmustern

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

Ü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):

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

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:

• Gehen Sie zu Netzwerk > Nutzlast: Sie können jetzt die Schaltflächen Quelle anzeigen und URL-codiert ansehen mithilfe der Tabulatortaste fokussieren 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, z. B. in der Baumstruktur unter Quellen > Seite: Mit der Eingabetaste werden Knoten mit untergeordneten Elementen jetzt 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 (Ctrl + Ctrl für Mac, Ctrl + Ctrl 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: <ph type="x-smartling-placeholder">
  </ph>
  • 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 > Google Workspace: 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools