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

Einige CSS-Attribute wie filter verwenden Funktionen für Werte. Mit filter: blur(1px) wird einem Knoten beispielsweise eine 1-Pixel-Weichzeichnung 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.

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.

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.

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.

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 Ihre Seite beispielsweise eine <iframe> enthält und diese <iframe> IndexedDB verwendet, können Sie die zugehörigen Datenbanken nicht sehen. Ab Chrome 75 werden in den Entwicklertools IndexedDB-Datenbanken für alle Ursprünge angezeigt.

Abbildung 5. Das alte Verhalten. Auf der Seite ist eine Demo eingebettet, die IndexedDB verwendet, aber es sind keine Datenbanken 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. Ihre Website verwendet die Textkomprimierung, 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 großen Anfragezeilen verfügbar. Sie können jetzt auf diese Informationen zugreifen, indem Sie den Mauszeiger auf die Spalte Größe bewegen.

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 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 konnten diese drei Unterbrechungen im Bereich Unterbrechungen nicht einzeln verwaltet werden. Ab Chrome 75 erhält jeder Inline-Unterbrechungspunkt einen eigenen Eintrag im Bereich Unterbrechungen.

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

Abbildung 9. Das neue Verhalten Der Bereich Haltepunkte enthält drei Einträge.

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.

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.

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.

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“

Die Tests zur Barrierefreiheit ergaben, dass es im Editor einen Tab-Trap gibt. 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

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 dies tun.

Chrome-Entwicklertools-Team kontaktieren

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

• Unter crbug.com können Sie uns Feedback und Funktionsanfragen senden.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in DevTools

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