Neuerungen in den Entwicklertools (Chrome 94)

Jecelyn Yeen

Entwicklertools in Ihrer bevorzugten Sprache verwenden

Die Chrome-Entwicklertools unterstützen jetzt mehr als 80 Sprachen. Sie können also in Ihrer bevorzugten Sprache arbeiten.

Öffnen Sie die Einstellungen, wählen Sie im Drop-down-Menü Einstellungen > Sprache die gewünschte Sprache aus und laden Sie die DevTools neu.

Einstellungen“ width=„800“ height=„494“>

Chromium-Problem: 1163928

Neue Nest Hub-Geräte in der Geräteliste

Sie können jetzt die Abmessungen von Nest Hub und Nest Hub Max im Gerätemodus simulieren.

Klicken Sie auf Geräte-Symbolleiste ein-/ausblenden   Gerätesymbolleiste ein- und ausblenden und wählen Sie in der Geräteliste Nest Hub oder Nest Hub Max aus.

Nest Hub im Gerätemodus

Chromium-Problem: 1223525

Origin Trials in der Ansicht „Frame-Details“

Im Bereich „Anwendung“ können Sie jetzt in der Ansicht mit den Framedetails Informationen zu den Origin Trials einer Website abrufen.

Mit Ursprungstests erhalten Sie Zugriff auf eine neue oder experimentelle Funktion, mit der Sie Funktionen entwickeln können, die Ihre Nutzer für einen begrenzten Zeitraum ausprobieren können, bevor die Funktion für alle verfügbar gemacht wird.

Öffnen Sie eine Seite mit Ursprungstests, z.B. die Demoseite. Scrollen Sie im Bereich Anwendung nach unten zum Abschnitt Frames und wählen Sie den obersten Frame aus.

Origin Trials in der Ansicht „Frame-Details“

Chromium-Problem: 607555

Neues Badge für CSS-Containerabfragen

Neben den Containerelementen (den übergeordneten Elementen, die den Kriterien der @container-At-Regeln entsprechen) wird ein neues Container-Badge hinzugefügt. Klicken Sie auf das Symbol, um ein Overlay des ausgewählten Containers und aller seiner untergeordneten Elemente auf der Seite ein- oder auszublenden.

Emblem für CSS-Containerabfragen

Chromium-Problem: 1146422

Neues Kästchen zum Invertieren der Netzwerkfilter

Mit dem neuen Kästchen Invertieren können Sie die Filter im Netzwerkbereich umkehren.

Sie können beispielsweise „status-code: 404“ eingeben, um die Netzwerkanfragen mit dem Status „404“ zu filtern. Aktivieren Sie das Kästchen Invertieren, um den Filter zu negieren. So werden alle Netzwerkanfragen angezeigt, die nicht den Status 404 haben.

Netzwerkfilter umkehren

Chromium-Problem: 1054464

Einstellung der Seitenleiste der Konsole

Die Seitenleiste der Konsole wird entfernt und die Filterschnittstelle wird in die Symbolleiste verschoben. Haben Sie Bedenken oder Feedback? Hier können Sie uns Feedback geben.

Nachricht zur Einstellung der Seitenleiste der Konsole

Chromium-Problem: 1232937

Rohdaten der Set-Cookie-Header auf dem Tab „Probleme“ und im Netzwerkbereich anzeigen

In den Entwicklertools werden jetzt Roh-Set-Cookie-Header auf dem Tab Probleme angezeigt.

Bisher wurden in den Entwicklertools im Bereich „Netzwerk“ keine fehlerhaften Cookies (falscher Set-Cookie-Header) angezeigt. Mit dem neuen Filter response-header-set-cookie im Bereich Netzwerk können Nutzer die Rohantwort des Set-Cookie-Headers filtern. DevTools verknüpft die Roh-Set-Cookie-Header auf dem Tab Probleme mit dem Bereich Netzwerk.

„Set-Cookie“-Rohheader auf dem Tab „Probleme“ und im Netzwerkbereich

Chromium-Problem: 1179186

Native Accessors werden in der Konsole einheitlich als eigene Properties angezeigt

In der Konsole werden native Accessors jetzt einheitlich als eigene Attribute angezeigt.

Wenn Sie beispielsweise den Ausdruck new Int8Array([1, 2, 3]) in der Konsole auswerten, werden native Accessoren wie length und byteOffset nicht in der Vorschau angezeigt. Mit diesem Update werden native Accessoren in der Vorschau angezeigt und Werte werden beim Erweitern sofort ausgewertet.

Native Accessors werden in der Konsole einheitlich als eigene Properties angezeigt

Chromium-Probleme: 1076820, ​​1199247

Korrekte Fehler-Stacktraces für Inline-Skripts mit #sourceURL

DevTools löst Inline-Scripts mit #sourceURL jetzt richtig auf und zeigt korrekte Fehler-Stacktraces für das Debugging an.

Bisher wurde in den Entwicklertools für Inline-Scripts mit #sourceURL eine falsche Position angezeigt, nämlich relativ zum umgebenden Dokument und nicht relativ zum öffnenden <script>-Tag.

Korrekte Fehler-Stacktraces für Inline-Skripts mit #sourceURL

Chromium-Probleme: 1183990, ​​578269

Farbformat im Bereich „Berechnet“ ändern

Sie können jetzt das Farbformat eines beliebigen Elements im Bereich „Berechnet“ ändern, indem Sie bei gedrückter Umschalttaste auf die Farbvorschau klicken.

Bei gedrückter Umschalttaste auf die Farbvorschau klicken, um das Farbformat zu ändern

Chromium-Problem: 1226371

Benutzerdefinierte Tooltips durch native HTML-Tooltips ersetzen

In DevTools werden jetzt native HTML-Tooltips für alle Komponenten verwendet. In den Entwicklertools gibt es schon seit Langem eine benutzerdefinierte Tooltip-Implementierung, da native HTML-Tooltips nicht gestylt werden können.

Leider ist die Wartung einer benutzerdefinierten Tooltip-Implementierung kompliziert und es treten regelmäßig komplexe Fehler auf.

Nachdem wir die Vorteile der benutzerdefinierten Implementierungen neu gewichtet haben, sind wir zu dem Schluss gekommen, dass die nativen HTML-Tooltips für DevTools ausreichen. Durch die Einführung der Tooltips wird eine Vielzahl von Problemen für unsere Nutzer vermieden.

Kurzinfo zu den Entwicklertools

Chromium-Problem: 1223391

[Experimentell] Probleme auf dem Tab „Probleme“ ausblenden

Aktivieren Sie den Test Menü „Probleme ausblenden“, um Probleme auf dem Tab Probleme auszublenden. So können Sie sich auf die wichtigen Probleme konzentrieren, die für Sie relevant sind.

Bewegen Sie den Mauszeiger auf dem Tab Problem auf ein Problem, klicken Sie rechts auf das Problemmenü Mehr und wählen Sie Probleme wie dieses ausblenden aus, um es auszublenden.

Experimentelles Kontextmenü zum Ausblenden von Problemen

Chromium-Problem: 1175722

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.