Neue Funktionen in den Entwicklertools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Mit Gemini Fehler und Warnungen in der Console besser verstehen

Diese Chrome-Version bietet Funktionen für Generative AI in der Entwicklertools-Konsole, die Ihnen ein besseres Verständnis der auftretenden Fehler und Warnungen ermöglichen sollen.

Um eine KI-generierte Erklärung eines Fehlers oder einer Warnung zu erhalten, klicken Sie in der Console neben der Meldung auf die Schaltfläche Glühlampenzack. Diesen Fehler verstehen (Warnung) und folgen Sie der Anleitung.

Die KI-generierte Erklärung eines Fehlers.

Weitere Informationen finden Sie unter Mit KI Fehler und Warnungen besser verstehen.

Unterstützung für @position-try-Regeln unter „Elemente“ > „Stile“

Um Sie beim Debuggen der CSS-Ankerposition zu unterstützen, unterstützt der Tab Elemente > Stile jetzt @position-try-CSS-Regeln. Der Tab löst position-try-options-Werte auf und verknüpft jede Option mit einem eigenen @position-try --name-Bereich.

Das Vorher-Nachher-Ergebnis und die Unterstützung der CSS-Regeln „@position-try“.

Weitere Informationen finden Sie unter Elemente mithilfe von CSS-Ankerpositionen aneinander binden.

Chromium-Problem: 40279608.

Verbesserungen im Bereich „Quellen“

In dieser Version wurden einige Verbesserungen im Bereich Quellen vorgenommen.

Automatisches Erstellen von optimiertem Drucken und schließenden Klammern konfigurieren

Sie können die automatische Optimierung von optimiertem Druck und das Schließen von Klammern jetzt für den Editor unter Quellen aktivieren oder deaktivieren. Die Funktion „Optimiertes Drucken“ macht komprimierte Dateien lesbar. Wenn Sie die Klammer schließen, wird beim Eingeben einer öffnenden Klammer automatisch eine schließende Klammer () oder }) oder ein schließendes Tag (>) hinzugefügt.

Um die gewünschte Funktionsweise zu konfigurieren, aktivieren oder deaktivieren Sie unter Einstellungen Einstellungen > Einstellungen > Quellen die neuen Optionen check_box Automatische schließende Klammern und check_box Automatisch reduzierte Quellen automatisch drucken.

Der Vorher-Nachher-Vergleich und das Hinzufügen neuer Einstellungen für die automatische Optimierung von optimiertem Druck und das Schließen von Klammern.

Chromium-Probleme: 40865010, 324314570.

Abgelehnte Promise-Objekte werden als erfasst erkannt

Im Bereich Quellen werden abgelehnte Versprechen jetzt korrekt als erkannt erkannt, wenn du sie mit .catch() oder .then() mit zwei Argumenten verarbeitet hast.

Das heißt, wenn Quellen > Haltepunkte > check_box Bei nicht abgefangenen Ausnahmen anhalten aktiviert ist, wird der Debugger bei Anweisungen wie den folgenden nicht pausiert:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Der Vorher-Nachher-Vergleich der erkannten Ablehnungen.

Chromium-Problem: 40283993.

Fehlerursachen in der Console

In der Konsole werden jetzt Verkettungen von Fehlerursachen im Stacktrace angezeigt, falls vorhanden.

Sie können die Fehlerbehebung vereinfachen, indem Sie beim Erkennen und erneuten Ausgeben von Fehlern Fehlerursachen angeben. Während die Console die Ursachenkette durchläuft, wird jeder Fehlerstack mit dem Präfix Caused by: ausgegeben, sodass Sie den ursprünglichen Fehler weiterhin sehen können.

Die Stacktraces vor und nach dem Drucken mit dem Präfix „Verursacht durch“.

Chromium-Problem: 40182832.

Verbesserungen beim Netzwerkbereich

In dieser Version wurden einige Verbesserungen im Bereich Netzwerk vorgenommen.

Header „Early Hints“ prüfen

Die "Early Hints"-Header erhalten einen speziellen Abschnitt auf dem Tab Headers der Anfrage im Steuerfeld Netzwerk. Bisher befanden sich die relevanten Header im Abschnitt Antwortheader.

Early Hints ist ein HTTP-Statuscode (103 Early Hints), mit dem vor einer endgültigen Antwort eine vorläufige HTTP-Antwort gesendet wird. Dadurch kann ein Server dem Browser Hinweise auf wichtige Unterressourcen (z. B. ein Stylesheet oder kritisches JavaScript) oder Ursprünge senden, die wahrscheinlich von der Seite verwendet werden, während der Server gerade mit der Erstellung der Hauptressource beschäftigt ist.

Der Vorher-Nachher-Abschnitt zum Hinzufügen eines speziellen Abschnitts für „Erste Hinweise“.

Weitere Informationen

Chromium-Problem: 40222701.

Spalte „Wasserfall“ ausblenden

Sie können jetzt die Spalte Wasserfall im Bereich Netzwerk ähnlich wie andere Spalten ausblenden. Klicken Sie mit der rechten Maustaste auf einen beliebigen Spaltennamen und entfernen Sie im Drop-down-Menü das Häkchen aus dem Kästchen check_box_outline_blank Wasserfall.

Der vor und nach dem Hinzufügen der Option zum Ausblenden der Spalte „Wasserfall“.

Chromium-Problem: 40574989.

Verbesserungen im Bereich „Leistung“

Diese Version enthält mehrere Verbesserungen im Bereich Leistung.

Statistiken für CSS-Selektoren erfassen

Der Bereich Leistung erhält eine neue Einstellung, mit der Sie CSS-Selektorstatistiken für lang andauernde Ereignisse des Typs Stil neu berechnen erfassen können.

Um die Statistiken zu sehen, wählen Sie ein Ereignis vom Typ Stil neu berechnen aus und öffnen Sie den neuen Tab Selektorstatistiken. Auf dem Tab finden Sie Informationen zur verstrichenen Zeit, zu Übereinstimmungen und zur Anzahl der Übereinstimmungen sowie den Prozentsatz der nicht übereinstimmenden Slow Paths für jeden Selektor.

Die Daten vor und nach dem Hinzufügen von Auswahlstatistiken.

Chromium-Problem: 324282954.

Reihenfolge ändern und Tracks ausblenden

Der Bereich Leistung erhält einen neuen Konfigurationsmodus, in dem Sie die Reihenfolge der Tracks ändern und ausblenden können.

Um den Konfigurationsmodus zu öffnen, klicken Sie links neben dem Tracknamen auf die Schaltfläche Bearbeiten Bearbeiten. Klicken Sie dann auf arrow_upward nach oben oder arrow_downward, um den Track zu verschieben, oder klicken Sie auf visibility_off (Ausblenden). Wenn Sie fertig sind, klicken Sie rechts neben dem Tracknamen auf die Schaltfläche Fertig Überprüfen.

In der nächsten Version, Chrome 126, werden weitere Verbesserungen dieser Benutzeroberfläche vorgenommen.

Chromium-Problem: 311439339.

Binder im Bereich „Arbeitsspeicher“ ignorieren

Sie können jetzt Keeper in Heap-Snapshots ignorieren, die Sie im Bereich Arbeitsspeicher erfassen.

Wenn Sie einen Binder ignorieren möchten, wählen Sie ein Objekt aus. Klicken Sie dann im Abschnitt Binder mit der rechten Maustaste auf einen Binder und wählen Sie im Drop-down-Menü die Option Diesen Binder ignorieren aus. Ignorierte Keeper werden in der Spalte Distance mit dem Wert ignored gekennzeichnet. Wenn Sie diese nicht mehr ignorieren möchten, klicken Sie oben in der Aktionsleiste auf Ignorierte Binder wiederherstellen.

Das Datum vor und nach dem Hinzufügen einer Option zum Ignorieren von Bindern.

Darüber hinaus unterstützen Heap-Snapshots jetzt eine größere Anzahl (Hunderte von Millionen) von Begrenzungsrändern und Knoten (332350576).

Chromium-Problem: 327337527.

Lighthouse 11.7.1

Im Bereich Lighthouse wird jetzt Lighthouse 11.7.1 ausgeführt. Vollständige Liste der Änderungen

Zu den wichtigsten Änderungen gehört die Unterstützung des Plug-ins für Publisher Ads, das in dieser Version veraltet ist.

Das Entfernen der Unterstützung für das Publisher Ads-Plug-in vor und nach dem Hinzufügen

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

Chromium-Problem: 772558.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

  • Der Vorschaustatus des Bereichs Rekorder (329271496) ist jetzt offiziell beendet.
  • In der Console wird jetzt kein Fehler mehr angezeigt, wenn ein benutzerdefinierter Formatierer eine null für die body()-Funktion zurückgibt. Dies ist ein gültiges Verhalten (329400119).
  • Im Bereich Quellen wurde die Syntaxhervorhebung aktualisiert. Insbesondere unterstützt er jetzt die Flags v und d im regulären Ausdruck.
  • Auf dem Tab Netzwerk > Cookies wurde ein Fehler behoben, bei dem ausgenommene Cookies zu Antwort-Cookies zugeordnet wurden (41491846).
  • Auf dem Tab Elemente > Stile ist jetzt Folgendes verfügbar:
    • Zeigt vollständig überlastete übernommene Regeln mit benutzerdefinierten Eigenschaften (41489874) an.
    • Markiert den angewendeten Wert abhängig vom Farbdesign (331123816) in „light-dark()“ (Helldunkel()).

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   Mehr   > 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.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59