Neuerungen in den Entwicklertools (Chrome 75)

Kayce Basques

Hallo! Hier sind die Neuigkeiten in den Chrome DevTools in Chrome 75.

Videoversion dieser Seite

Sinnvolle voreingestellte Werte beim automatischen Vervollständigen von CSS-Funktionen

Für einige CSS-Properties wie filter können Funktionen als Werte verwendet werden. Mit filter: blur(1px) wird beispielsweise einem Knoten eine Unschärfe von 1 Pixel hinzugefügt. Wenn Eigenschaften wie filter automatisch vervollständigt werden, wird in den Entwicklertools jetzt ein sinnvoller Wert für die Eigenschaft eingefügt, damit Sie eine Vorschau der Auswirkungen des Werts auf den Knoten sehen können.

Das alte Verhalten der automatischen Vervollständigung.

Abbildung 1. Das alte Verhalten der automatischen Vervollständigung. In den Entwicklertools wird filter: blur automatisch vervollständigt und im Darstellungsbereich ist keine Änderung zu sehen.

Das neue Verhalten der automatischen Vervollständigung.

Abbildung 2. Das neue Verhalten der automatischen Vervollständigung. In den Entwicklertools wird automatisch filter: blur(1px) ergänzt und die Änderung ist im Darstellungsbereich sichtbar.

Relevantes Chromium-Problem: #931145

Websitedaten über das Menü „Befehle“ löschen

Drücken Sie Strg + Umschalt + P oder Befehlstaste + Umschalt + P (Mac), um das Menü „Befehl“ zu öffnen. Führen Sie dann den Befehl Websitedaten löschen aus, um alle Daten zu löschen, die sich auf die Seite beziehen, einschließlich Dienstworker, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache und Anwendungscache.

Befehl „Websitedaten löschen“

Abbildung 3. Befehl Websitedaten löschen

Das Löschen von Websitedaten ist schon seit einiger Zeit unter Anwendung > Speicherinhalt löschen möglich. Die neue Funktion in Chrome 75 ist die Möglichkeit, den Befehl über das Befehlsmenü auszuführen.

Wenn Sie nicht alle Websitedaten löschen möchten, können Sie unter Anwendung > Speicherinhalt löschen festlegen, welche Daten gelöscht werden.

Tab „Anwendung“ mit ausgewählter Option „Speicherinhalt löschen“

Abbildung 4. Anwendung > Speicherinhalt löschen.

Relevantes Chromium-Problem: #942503

Alle IndexedDB-Datenbanken ansehen

Bisher konnten Sie unter Anwendung > IndexedDB nur IndexedDB-Datenbanken von der Hauptquelle prüfen. Wenn Sie beispielsweise ein <iframe> auf Ihrer Seite haben und dieses <iframe> IndexedDB verwendet, können Sie die Datenbank(en) nicht sehen. Ab Chrome 75 werden in den Entwicklertools IndexedDB-Datenbanken für alle Ursprünge angezeigt.

Das alte Verhalten. Auf der Seite ist eine Demo eingebettet, die IndexedDB verwendet, aber es sind keine Datenbanken sichtbar.

Abbildung 5. Das alte Verhalten. Auf der Seite ist eine Demo eingebettet, die IndexedDB verwendet, aber es sind keine Datenbanken sichtbar.

Das neue Verhalten Die Datenbanken der Demo sind sichtbar.

Abbildung 6. Das neue Verhalten Die Datenbanken der Demo sind sichtbar.

Relevantes Chromium-Problem: #943770

Nicht komprimierte Größe einer Ressource beim Bewegen des Mauszeigers anzeigen

Angenommen, Sie prüfen die Netzwerkaktivität. Auf Ihrer Website wird die Textkomprimierung verwendet, um die Übertragungsgröße von Ressourcen zu reduzieren. Sie möchten sehen, wie groß die Ressourcen der Seite sind, nachdem der Browser sie dekomprimiert hat. Bisher waren diese Informationen nur bei Verwendung von großen Anfragezeilen verfügbar. Sie können jetzt auf diese Informationen zugreifen, indem Sie den Mauszeiger auf die Spalte Größe bewegen.

Bewegen Sie den Mauszeiger auf die Spalte „Größe“, um die unkomprimierte Größe einer Ressource aufzurufen.

Abbildung 7. Bewegen Sie den Mauszeiger auf die Spalte „Größe“, um die unkomprimierte Größe einer Ressource aufzurufen.

Relevantes Chromium-Problem: #805429

Inline-Haltepunkte im Haltepunktbereich

Angenommen, Sie fügen der folgenden Codezeile einen Codezeilen-Bruchpunkt hinzu:

document.querySelector('#dante').addEventListener('click', logWarning);

In den DevTools können Sie schon seit einiger Zeit angeben, wann genau die Ausführung an einem bestimmten Haltepunkt pausiert werden soll: am Anfang der Zeile, bevor document.querySelector('#dante') oder addEventListener('click', logWarning) aufgerufen wird. Wenn Sie alle drei aktivieren, erstellen Sie im Grunde drei Haltepunkte. Bisher war es im Bereich Bruchstellen nicht möglich, diese drei Bruchstellen einzeln zu verwalten. Ab Chrome 75 erhält jeder Inline-Unterbrechungspunkt einen eigenen Eintrag im Bereich Unterbrechungen.

Das alte Verhalten. Im Bereich „Bruchstellen“ ist nur ein Eintrag vorhanden.

Abbildung 8. Das alte Verhalten. Im Bereich Bruchstellen ist nur ein Eintrag vorhanden.

Das neue Verhalten Im Bereich „Breakpoints“ sind drei Einträge zu sehen.

Abbildung 9. Das neue Verhalten Im Bereich Breakpoints sind drei Einträge zu sehen.

Relevantes Chromium-Problem: #927961

Anzahl der IndexedDB- und Cache-Ressourcen

In den Bereichen IndexedDB und Cache wird jetzt die Gesamtzahl der Ressourcen in einer Datenbank oder einem Cache angezeigt.

Gesamtzahl der Einträge in einer IndexedDB-Datenbank.

Abbildung 10. Gesamtzahl der Einträge in einer IndexedDB-Datenbank.

Relevante Chromium-Probleme: #941197, #930773, #930865

Einstellung zum Deaktivieren der Kurzinfo „Detaillierte Prüfung“

In Chrome 73 wurden detaillierte Kurzinfos im Inspektionsmodus eingeführt.

Eine detaillierte Kurzinfo.

Abbildung 11. Eine detaillierte Kurzinfo mit Farbe, Schriftart, Rand und Kontrast

Sie können diese detaillierten Kurzinfos jetzt unter Einstellungen > Einstellungen > Elemente > Detaillierte Kurzinfos für die Prüfung anzeigen deaktivieren.

Eine minimale Kurzinfo.

Abbildung 12. Eine minimale Kurzinfo, die nur Breite und Höhe enthält.

Relevantes Chromium-Problem: #948417

Einstellung zum Ein- und Ausblenden von Tabulatorabständen im Editor des Bereichs „Quellen“

Bei den Tests zur Barrierefreiheit wurde festgestellt, dass es im Editor eine Tab-Falle gab. Wenn ein Nutzer mit der Tastatur den Editor aufgerufen hatte, konnte er nicht mehr mit der Tabulatortaste herauswechseln, da die Tabulatortaste für die Einzüge verwendet wurde. Wenn Sie das Standardverhalten überschreiben und den Tabulator Tab zum Verschieben des Fokus verwenden möchten, aktivieren Sie Einstellungen > Einstellungen > Quellen > Tabulator zum Verschieben des Fokus aktivieren.

In letzter Zeit wurde viel daran gearbeitet, die Benutzeroberfläche von DevTools für die Bedienung per Tastatur zu optimieren. Weitere Informationen finden Sie in Robs Video Chrome DevTools mit Hilfstechnologien bedienen.

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.