Neuerungen in den Entwicklertools (Chrome 75)

Hallo! Das ist neu in den Chrome-Entwicklertools in Chrome 75.

Videoversion dieser Seite

Aussagekräftige voreingestellte Werte bei der automatischen Vervollständigung von CSS-Funktionen

Einige CSS-Properties wie filter verwenden Funktionen für Werte. Mit filter: blur(1px) wird beispielsweise einem Knoten ein 1-Pixel-Weichzeichnereffekt hinzugefügt. Bei der automatischen Vervollständigung von Attributen wie filter geben die Entwicklertools jetzt einen aussagekräftigen Wert in das Attribut ein, sodass Sie eine Vorschau davon sehen können, welche Art von Änderung der Wert auf dem Knoten haben wird.

Das alte Verhalten der automatischen Vervollständigung.

Abbildung 1. Das alte Verhalten der automatischen Vervollständigung. Die Entwicklertools werden automatisch auf filter: blur vervollständigt und im Darstellungsbereich sind keine Änderungen sichtbar.

Das neue Verhalten der automatischen Vervollständigung.

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

Relevantes Chromium-Problem: #931145

Websitedaten über das Befehlsmenü löschen

Drücken Sie Strg + Umschalttaste + P oder Befehlstaste + Umschalttaste + P (Mac), um das Befehlsmenü zu öffnen. Führen Sie dann den Befehl Websitedaten löschen aus, um alle Daten für die Seite zu löschen, darunter Service Worker, localStorage, sessionStorage, IndexedDB, IndexedDB, Anwendungscache, Anwendungscache, Web-SQL, {201und Web-SQL.

Der Befehl „Websitedaten löschen“.

Abbildung 3. Den Befehl Websitedaten löschen.

Das Löschen von Websitedaten war schon länger über Anwendung > Speicherinhalt löschen möglich. Bei der neuen Funktion in Chrome 75 kann der Befehl über das Befehlsmenü ausgeführt werden.

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

Auf dem Tab „Application“ (Anwendung) ist „Clear Storage“ (Speicherinhalt löschen) ausgewählt.

Abbildung 4. Anwendung > Speicherinhalt löschen

Relevantes Chromium-Problem: #942503

Alle IndexedDB-Datenbanken ansehen

Bisher konnten Sie mit Application > IndexedDB IndexedDB-Datenbanken nur vom Hauptursprung aus prüfen. Wenn Sie beispielsweise eine <iframe> auf Ihrer Seite haben und diese <iframe> IndexedDB verwendet, können Sie ihre 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 wird 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

Unkomprimierte Größe einer Ressource ansehen, wenn der Mauszeiger darauf bewegt wird

Angenommen, Sie prüfen die Netzwerkaktivität. Ihre Website verwendet eine Textkomprimierung, um die Übertragungsgröße von Ressourcen zu reduzieren. Sie möchten sehen, wie groß die Ressourcen der Seite sind, nachdem sie vom Browser dekomprimiert wurden. Bisher war diese Information nur bei Verwendung von großen Anfragezeilen verfügbar. Jetzt können Sie 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 nicht komprimierte Größe einer Ressource zu sehen.

Abbildung 7. Bewegen Sie den Mauszeiger auf die Spalte „Größe“, um die nicht komprimierte Größe einer Ressource zu sehen.

Relevantes Chromium-Problem: #805429

Haltepunkte im Haltepunktbereich inline anzeigen

Angenommen, Sie fügen der folgenden Codezeile einen Haltepunkt für die Codezeile hinzu:

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

In den Entwicklertools können Sie seit einiger Zeit angeben, wann genau an einem Haltepunkt wie diesem pausiert werden soll: am Anfang der Zeile, vor dem Aufruf von document.querySelector('#dante') oder vor dem Aufruf von addEventListener('click', logWarning). Wenn Sie alle drei aktivieren, erhalten Sie im Grunde drei Haltepunkte. Bisher konnten Sie diese drei Haltepunkte im Bereich Breakpoints nicht einzeln verwalten. Ab Chrome 75 erhält jeder Inline-Haltepunkt einen eigenen Eintrag im Bereich Haltepunkte.

Das alte Verhalten. Der Bereich „Breakpoints“ enthält nur einen Eintrag.

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

Das neue Verhalten. Der Bereich „Breakpoints“ enthält drei Einträge.

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.

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 für die Prüfung

In Chrome 73 wurden detaillierte Kurzinfos im Prüfmodus 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 Kurzinfo zur Prüfung anzeigen deaktivieren.

Eine minimale Kurzinfo.

Abbildung 12. Eine minimale Kurzinfo, die nur die Breite und Höhe anzeigt.

Relevantes Chromium-Problem: #948417

Einstellung für das Wechseln der Tabeinzuge im Editor für den Bereich „Quellen“

Tests zur Barrierefreiheit ergaben, dass es im Editor einen Tab-Trap gab. Nachdem ein Nutzer mit der Tastatur den Editor mit der Tabulatortaste aufgerufen hatte, konnte er die Tabulatortaste nicht mehr verlassen, da für die Einrückung die Tabulatortaste verwendet wurde. Wenn Sie das Standardverhalten überschreiben und den Fokus mit der Tabulatortaste verschieben möchten, aktivieren Sie Einstellungen > Einstellungen > Quellen > Fokus bei Tabbewegungen aktivieren.

In letzter Zeit wurde viel daran gearbeitet, die Benutzeroberfläche der Entwicklertools selbst übersichtlicher zu gestalten. Weitere Informationen finden Sie unter Chrome-Entwicklertools mit unterstützender Technologie verwenden.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59