Neuerungen in den Entwicklertools (Chrome 75)

Kayce Basques
Kayce Basques
X GitHub

Hallo! Hier finden Sie die Neuerungen in den Chrome-Entwicklertools in Chrome 75.

Videoversion dieser Seite

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

Für einige CSS-Properties wie filter werden Funktionen als Werte verwendet. Mit filter: blur(1px) wird beispielsweise ein Unschärfeeffekt von 1 Pixel auf einen Knoten angewendet. Beim automatischen Vervollständigen von Attributen wie filter wird das Attribut jetzt mit einem aussagekräftigen Wert gefüllt, damit Sie sehen können, welche Art von Änderung der Wert für den Knoten bewirkt.

Das alte Verhalten der automatischen Vervollständigung.

Abbildung 1. Das alte Verhalten der automatischen Vervollständigung. DevTools vervollständigt automatisch zu filter: blur und es ist keine Änderung im Darstellungsbereich sichtbar.

Das neue Verhalten bei der automatischen Vervollständigung.

Abbildung 2. Das neue Verhalten bei der automatischen Vervollständigung. DevTools vervollständigt automatisch zu filter: blur(1px) und die Änderung ist im Darstellungsbereich sichtbar.

Relevantes Chromium-Problem: #931145

Websitedaten über das Befehlsmenü löschen

Drücken Sie Strg + Umschalt + P oder Befehl + Umschalt + P (Mac), um das Befehlsmenü zu öffnen, und führen Sie dann den Befehl Websitedaten löschen aus, um alle Daten im Zusammenhang mit der Seite zu löschen, einschließlich Service Workern, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache und Anwendungscache.

Der Befehl „Websitedaten löschen“

Abbildung 3. Der Befehl Websitedaten löschen.

Das Löschen von Websitedaten ist schon seit einiger Zeit unter Anwendung > Speicherinhalt löschen möglich. In Chrome 75 können Sie den Befehl über das Befehlsmenü ausführen.

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

Der Tab „Anwendung“ mit der Option „Speicherinhalt löschen“ ist ausgewählt.

Abbildung 4. Anwendung > Speicherinhalt löschen.

Relevantes Chromium-Problem: #942503

Alle IndexedDB-Datenbanken ansehen

Bisher konnten Sie unter Anwendung > IndexedDB nur IndexedDB-Datenbanken des Hauptursprungs untersuchen. Wenn Sie beispielsweise ein <iframe> auf Ihrer Seite hatten und dieses <iframe> IndexedDB verwendet hat, 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, in der IndexedDB verwendet wird, 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 Hovern ansehen

Angenommen, Sie überprüfen die Netzwerkaktivität. Auf Ihrer Website wird 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 verfügbar, wenn große Anforderungszeilen verwendet wurden. Sie können jetzt auf diese Informationen zugreifen, indem Sie den Mauszeiger auf die Spalte Größe bewegen.

Wenn Sie den Mauszeiger auf die Spalte „Größe“ bewegen, wird die unkomprimierte Größe einer Ressource angezeigt.

Abbildung 7. Wenn Sie den Mauszeiger auf die Spalte „Größe“ bewegen, wird die unkomprimierte Größe einer Ressource angezeigt.

Relevantes Chromium-Problem: #805429

Inline-Haltepunkte im Haltepunktbereich

Angenommen, Sie fügen der folgenden Codezeile einen Zeilen-Haltepunkt hinzu:

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

Seit einiger Zeit können Sie in den DevTools angeben, wann genau die Ausführung bei einem Haltepunkt pausiert werden soll, z. B. am Anfang der Zeile, bevor document.querySelector('#dante') aufgerufen wird oder bevor addEventListener('click', logWarning) aufgerufen wird. Wenn Sie alle drei aktivieren, erstellen Sie im Grunde drei Haltepunkte. Bisher konnten diese drei Breakpoints im Bereich Breakpoints nicht einzeln verwaltet werden. Ab Chrome 75 hat jeder Inline-Haltepunkt einen eigenen Eintrag im Bereich Haltepunkte.

Das alte Verhalten. Im Bereich „Breakpoints“ gibt es nur einen Eintrag.

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

Das neue Verhalten. Im Bereich „Haltepunkte“ sind drei Einträge vorhanden.

Abbildung 9. Das neue Verhalten. Im Bereich Haltepunkte sind drei Einträge vorhanden.

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 detaillierten Kurzinfo „Inspizieren“

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

Eine detaillierte Kurzinfo.

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

Sie können diese detaillierten Tooltips jetzt unter Einstellungen > Einstellungen > Elemente > Detaillierten Tooltip für das Prüftool anzeigen deaktivieren.

Eine minimale Kurzinfo.

Abbildung 12. Ein minimaler Kurzinfo-Text, der nur Breite und Höhe anzeigt.

Relevantes Chromium-Problem: #948417

Einstellung zum Einrücken von Tabs im Editor des Bereichs „Quellen“

Bei Tests zur Barrierefreiheit wurde festgestellt, dass es im Editor eine Tab-Falle gibt. Wenn ein Tastaturnutzer in den Editor gewechselt war, konnte er ihn nicht mehr verlassen, da die Tabulatortaste für den Einzug verwendet wurde. Wenn Sie das Standardverhalten überschreiben und den Fokus mit der Tabulatortaste verschieben möchten, aktivieren Sie Einstellungen > Einstellungen > Quellen > Fokus mit Tabulatortaste verschieben.

In letzter Zeit wurde viel daran gearbeitet, die DevTools-Benutzeroberfläche selbst besser mit der Tastatur bedienbar zu machen. Weitere Informationen finden Sie in Robs Beitrag Navigate Chrome DevTools With Assistive Technology.

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.