Neuerungen in den Entwicklertools (Chrome 94)

Jecelyn Yeen

DevTools 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 und wählen Sie dann im Drop-down-Menü Einstellungen > Sprache die gewünschte Sprache aus. Aktualisieren Sie dann die DevTools.

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ätesymbolleiste ein-/ausschalten   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

Ursprungstests in der Frame-Detailansicht

Im Bereich „Anwendung“ in der Detailansicht des Frames finden Sie jetzt Informationen zu den Ursprungstests einer Website.

Mit Ursprungstests erhältst du Zugriff auf eine neue oder experimentelle Funktion, um Funktionen zu entwickeln, die deine Nutzer für begrenzte Zeit testen 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.

Ursprungstests in der Frame-Detailansicht

Chromium-Problem: 607555

Neues Symbol für CSS-Containerabfragen

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

Symbol für CSS-Containerabfragen

Chromium-Problem: 1146422

Neues Kästchen zum Umkehren der Netzwerkfilter

Mit dem neuen Kästchen Umkehren können Sie die Filter im Bereich „Netzwerk“ umkehren.

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

Netzwerkfilter umkehren

Chromium-Problem: 1054464

Einstellung der Seitenleiste der Console

Die Seitenleiste der Konsole wird entfernt und die Filter-UI wird in die Symbolleiste verschoben. Haben Sie Bedenken oder Feedback? Melden Sie es uns über diesen Issue Tracker.

Nachricht zur Einstellung der Seitenleiste der Console

Chromium-Problem: 1232937

Rohe Set-Cookie-Header auf dem Tab „Probleme“ und im Bereich „Netzwerk“ anzeigen

In den DevTools werden jetzt auf dem Tab Probleme rohe Set-Cookie-Header angezeigt.

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

Rohe „Set-Cookie“-Header auf dem Tab „Probleme“ und im Bereich „Netzwerk“

Chromium-Problem: 1179186

Native Zugriffe in der Console als eigene Properties anzeigen

In der Console werden native Zugriffe jetzt einheitlich als eigene Properties angezeigt.

Wenn Sie beispielsweise den Ausdruck new Int8Array([1, 2, 3]) in der Console ausgewertet haben, wurden native Zugriffe wie length und byteOffset nicht in der Vorschau angezeigt. Mit diesem letzten Update werden native Zugriffe in der Vorschau angezeigt und Werte werden beim Maximieren sofort ausgewertet.

Native Zugriffe in der Console als eigene Properties anzeigen

Chromium-Probleme: 1076820, 1199247

Richtige Fehler-Stack-Traces für Inline-Scripts mit #sourceURL

In den DevTools werden Inline-Scripts mit #sourceURL jetzt korrekt aufgelöst und es werden korrekte Fehlerstapel-Traces für die Fehlerbehebung angezeigt.

Bisher wurde in den Entwicklertools der falsche Speicherort für Inline-Scripts mit #sourceURL relativ zum umgebenden Dokument und nicht zum öffnenden <script>-Tag angezeigt.

Richtige Fehler-Stack-Traces für Inline-Scripts 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 Kurzinfos durch native HTML-Kurzinfos ersetzen

In den DevTools werden jetzt native HTML-Tooltips für alle Komponenten verwendet. In den Entwicklertools gibt es seit langem eine benutzerdefinierte Kurzinfo-Implementierung, da native HTML-Kurzinfos nicht formatiert werden können.

Leider ist die Pflege einer benutzerdefinierten Kurzinfo-Implementierung kompliziert und wir stoßen regelmäßig auf komplizierte Fehler.

Nachdem wir die Vorteile der benutzerdefinierten Implementierungen neu bewertet haben, sind wir der Meinung, dass die nativen HTML-Tooltips für DevTools ausreichen. Außerdem können wir mithilfe der Tooltips eine Vielzahl von Problemen für unsere Nutzer vermeiden.

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 Themen konzentrieren, die für Sie relevant sind.

Bewegen Sie den Mauszeiger auf dem Tab Problem auf ein Problem, klicken Sie rechts auf das Menü für das Problem Mehr und wählen Sie Ähnliche Probleme ausblenden aus, um es auszublenden.

Experimentelles Kontextmenü zum Ausblenden von Problemen

Chromium-Problem: 1175722

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.